/**
 * ServBank Flex Menu Styles
 * Modern flexbox-based menu with easy customization
 */

/* ==================================
   CSS Variables for Easy Customization
   ================================== */
:root {
  --sfm-container-max-width: 1200px;
  --sfm-menu-height: 60px;
  --sfm-menu-bg: transparent;
  --sfm-menu-color: #1a1a1a;
  --sfm-menu-font-size: 16px;
  --sfm-menu-font-weight: 500;
  --sfm-menu-text-transform: none;
  --sfm-menu-padding-x: 20px;
  --sfm-menu-padding-y: 0;
  --sfm-menu-gap: 0;
  --sfm-menu-hover-bg: transparent;
  --sfm-menu-hover-color: #2271b1;
  --sfm-menu-active-bg: transparent;
  --sfm-menu-active-color: #2271b1;
  --sfm-menu-align: flex-start;

  /* Submenu Variables */
  --sfm-submenu-bg: #ffffff;
  --sfm-submenu-color: #666666;
  --sfm-submenu-font-size: 15px;
  --sfm-submenu-border: #e8e8e8;
  --sfm-submenu-border-width: 1px;
  --sfm-submenu-border-radius: 0;
  --sfm-submenu-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sfm-submenu-padding: 20px;
  --sfm-submenu-gap: 0;
  --sfm-submenu-min-width: 250px;
  --sfm-submenu-item-padding-x: 20px;
  --sfm-submenu-item-padding-y: 12px;

  /* Submenu Header */
  --sfm-submenu-header-bg: transparent;
  --sfm-submenu-header-color: #1a1a1a;
  --sfm-submenu-header-font-size: 14px;
  --sfm-submenu-header-font-weight: 600;
  --sfm-submenu-header-text-transform: uppercase;
  --sfm-submenu-header-padding: 0 0 15px 0;

  /* Dropdown Icon */
  --sfm-dropdown-icon: "\203A";
  --sfm-dropdown-icon-size: 16px;
  --sfm-dropdown-icon-color: inherit;

  /* Transitions */
  --sfm-transition-speed: 0.3s;
  --sfm-mobile-breakpoint: 1024px;
}

/* ==================================
   Main Container
   ================================== */
.sfm-container {
  width: 100%;
  background: var(--sfm-menu-bg);
  position: relative;
  z-index: 1000;
}

.sfm-container.sfm-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: slideDown 0.3s ease-out;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ==================================
   Main Menu List
   ================================== */
.sfm-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--sfm-menu-align);
  list-style: none;
  margin: 0 auto;
  padding: var(--sfm-menu-padding-y) var(--sfm-menu-padding-x);
  max-width: var(--sfm-container-max-width);
  gap: var(--sfm-menu-gap);
}

.sfm-menu > li {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.sfm-menu > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--sfm-menu-padding-x);
  height: var(--sfm-menu-height);
  color: var(--sfm-menu-color);
  text-decoration: none;
  font-weight: var(--sfm-menu-font-weight);
  font-size: var(--sfm-menu-font-size);
  text-transform: var(--sfm-menu-text-transform);
  transition: color var(--sfm-transition-speed) ease;
  white-space: nowrap;
}

.sfm-menu > li > a:hover,
.sfm-menu > li > a:focus {
  background: var(--sfm-menu-hover-bg);
  color: var(--sfm-menu-hover-color);
}

/* Active state styling removed - no color change on page load */
.sfm-menu > li.current-menu-item > a,
.sfm-menu > li.current-menu-parent > a,
.sfm-menu > li.current-menu-ancestor > a {
  background: var(--sfm-menu-bg);
  color: var(--sfm-menu-color);
}

/* Hover color on active page items */
.sfm-menu > li.current-menu-item > a:hover,
.sfm-menu > li.current-menu-item > a:focus,
.sfm-menu > li.current-menu-parent > a:hover,
.sfm-menu > li.current-menu-parent > a:focus,
.sfm-menu > li.current-menu-ancestor > a:hover,
.sfm-menu > li.current-menu-ancestor > a:focus {
  background: var(--sfm-menu-hover-bg);
  color: var(--sfm-menu-hover-color);
}

/* ==================================
   Dropdown Icon
   ================================== */
.sfm-has-submenu > a::after {
  content: var(--sfm-dropdown-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  font-size: var(--sfm-dropdown-icon-size);
  color: var(--sfm-dropdown-icon-color);
  transform: rotate(90deg);
}

/* ==================================
   Icons
   ================================== */
.sfm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
}

.sfm-menu li.sfm-hide-title > a {
  padding: 0 15px;
}

.sfm-menu li.sfm-hide-title > a > :not(.sfm-icon) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==================================
   Submenu Container Structure - MULTI-COLUMN GRID
   ================================== */

/* Grid container for all submenu columns */
.sfm-submenu-grid {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: var(--sfm-container-max-width);
  background: var(--sfm-submenu-bg);
  border: var(--sfm-submenu-border-width) solid var(--sfm-submenu-border);
  border-radius: var(--sfm-submenu-border-radius);
  box-shadow: var(--sfm-submenu-shadow);
  opacity: 0;
  visibility: hidden;
  transition: color var(--sfm-transition-speed) ease;
  z-index: 100;
  padding: var(--sfm-submenu-padding);
}

/* Show grid when parent is active */
.sfm-has-submenu:hover > .sfm-submenu-grid,
.sfm-has-submenu.sfm-active > .sfm-submenu-grid {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

/* First level submenu list - flexbox layout for auto-width columns */
.sfm-submenu-grid > .sfm-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px 30px;
  align-items: flex-start;
}

/* List items - auto width based on content */
.sfm-submenu-grid > .sfm-submenu > li {
  flex: 0 0 auto;
  width: auto;
}

/* Commercial & Business Banking - max 4 columns per row */
#menu-item-146 > .sfm-submenu-grid > .sfm-submenu {
  max-width: 920px;
}

#menu-item-146 > .sfm-submenu-grid > .sfm-submenu > li {
  flex: 0 0 200px;
}

/* Individual column wrapper (contains header, divider, children) */
.sfm-submenu-column {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 200px;
  min-width: 200px;
}

/* Column header (the submenu item link) */
.sfm-column-header {
  margin-bottom: 10px;
  /* text-align: justify; */
}

.sfm-column-header a {
  font-weight: 700;
  font-size: 16px;
  color: var(--sfm-submenu-header-color);
  text-decoration: none;
  display: block;
  transition: color var(--sfm-transition-speed) ease;
  white-space: nowrap;
}

.sfm-column-header a:hover {
  color: var(--sfm-menu-hover-color);
}

/* Divider below column header */
.sfm-column-divider {
  width: 100%;
  height: 1px;
  background: var(--sfm-submenu-border);
  margin-bottom: 15px;
}

/* Children list container */
.sfm-submenu-column-children {
  display: block;
  /* text-align: justify; */
}

/* Children list - vertical stack */
.sfm-submenu-column-children > .sfm-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* text-align: justify; */
}

/* Submenu Header - title on top */
.sfm-submenu-header {
  padding: var(--sfm-submenu-header-padding);
  background: var(--sfm-submenu-header-bg);
  color: var(--sfm-submenu-header-color);
  font-weight: var(--sfm-submenu-header-font-weight);
  font-size: var(--sfm-submenu-header-font-size);
  text-transform: var(--sfm-submenu-header-text-transform);
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 15px;
  border-bottom: 2px solid var(--sfm-submenu-border);
  padding-bottom: 10px;
}

.sfm-submenu-header:empty {
  display: none;
}

/* Child links (depth 2 - inside columns) */
.sfm-submenu-column-children .sfm-submenu > li {
  margin: 0;
  padding: 0;
  text-align: left;
}

.sfm-submenu-column-children .sfm-submenu > li > a {
  display: block;
  padding: 6px 0;
  color: var(--sfm-submenu-color);
  font-size: var(--sfm-submenu-font-size);
  text-decoration: none;
  transition: color var(--sfm-transition-speed) ease;
  line-height: 1.5;
  text-align: left;
}

.sfm-submenu-column-children .sfm-submenu > li > a:hover,
.sfm-submenu-column-children .sfm-submenu > li > a:focus {
  color: var(--sfm-menu-hover-color);
}

/* Active state styling removed for submenu items */
.sfm-submenu-column-children .sfm-submenu > li.current-menu-item > a {
  color: var(--sfm-submenu-color);
  font-weight: inherit;
}

/* Hover color on active submenu items */
.sfm-submenu-column-children .sfm-submenu > li.current-menu-item > a:hover,
.sfm-submenu-column-children .sfm-submenu > li.current-menu-item > a:focus {
  color: var(--sfm-menu-hover-color);
}

/* ==================================
   Layout Types
   ================================== */

/* Mega Menu Layout */
.sfm-layout-mega .sfm-submenu-container {
  min-width: 600px;
  max-width: var(--sfm-container-max-width);
}

.sfm-layout-mega .sfm-submenu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sfm-submenu-gap);
}

.sfm-layout-mega .sfm-submenu > li > a {
  padding: 10px 15px;
}

/* Full Width Layout */
.sfm-layout-full-width .sfm-submenu-container {
  left: 50%;
  transform: translateX(-50%);
  width: var(--sfm-container-max-width);
  max-width: calc(100vw - 40px);
}

.sfm-layout-full-width:hover .sfm-submenu-container,
.sfm-layout-full-width.sfm-active .sfm-submenu-container {
  transform: translateX(-50%);
}

.sfm-layout-full-width .sfm-submenu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sfm-submenu-gap);
}

/* Dropdown Layout (Default) */
.sfm-layout-dropdown .sfm-submenu-container {
  min-width: var(--sfm-submenu-min-width);
}

/* ==================================
   Column Support
   ================================== */
.sfm-has-submenu[data-columns="2"] .sfm-submenu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sfm-submenu-gap);
}

.sfm-has-submenu[data-columns="3"] .sfm-submenu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sfm-submenu-gap);
}

.sfm-has-submenu[data-columns="4"] .sfm-submenu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sfm-submenu-gap);
}

.sfm-has-submenu[data-columns="5"] .sfm-submenu {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sfm-submenu-gap);
}

.sfm-has-submenu[data-columns="6"] .sfm-submenu {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sfm-submenu-gap);
}

/* ==================================
   Nested Submenus
   ================================== */
.sfm-submenu .sfm-submenu-container {
  top: 0;
  left: 100%;
  margin-left: 1px;
}

.sfm-submenu .sfm-has-submenu > a::after {
  content: "\203A";
  margin-left: auto;
  font-size: 1.2em;
}

/* ==================================
   Animations
   ================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDownAnim {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sfm-animation-fade .sfm-submenu-container {
  animation: fadeIn var(--sfm-transition-speed) ease;
}

.sfm-animation-slide .sfm-submenu-container {
  animation: slideDownAnim var(--sfm-transition-speed) ease;
}

.sfm-animation-scale .sfm-submenu-container {
  animation: scaleIn var(--sfm-transition-speed) ease;
}

/* ==================================
   Mobile Menu
   ================================== */
.sfm-mobile-toggle {
  display: none;
  padding: 15px 20px;
  background: transparent;
  border: none !important;
  outline: none !important;
  cursor: pointer;
  font-size: 1.5em;
  color: var(--sfm-menu-color);
}

@media (max-width: 1024px) {
  .sfm-mobile-toggle {
    display: block;
    margin-left: auto;
  }

  .sfm-container {
    position: relative;
  }

  .sfm-menu {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    max-height: 80vh;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    background: rgba(5, 41, 62, 0.98);
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 8px) 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    margin: 0;
  }

  .sfm-menu.sfm-active {
    display: block;
  }

  /* Top level menu items */
  .sfm-menu > li {
    display: block !important;
    flex-direction: column !important;
    flex: 0 0 auto;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .sfm-menu > li > a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    font-weight: 600;
    line-height: 1.5;
  }

  /* Dropdown indicator for items with submenus */
  .sfm-has-submenu > a::after {
    content: var(--sfm-dropdown-icon);
    transform: rotate(90deg);
    transition: transform 0.3s ease;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
  }

  .sfm-has-submenu.sfm-active > a::after {
    transform: rotate(-90deg);
  }

  /* First level submenu grid container */
  .sfm-submenu-grid {
    width: 100% !important;
    background: rgba(5, 41, 62, 1);
    display: none;
    overflow: visible;
    position: static !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    max-width: 100% !important;
  }

  .sfm-has-submenu.sfm-active > .sfm-submenu-grid {
    display: block;
  }

  /* Submenu list - contains all column groups */
  .sfm-submenu-grid > .sfm-submenu {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100%;
    max-width: 100% !important;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* List items containing columns - remove fixed height */
  .sfm-submenu-grid > .sfm-submenu > li {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0;
    margin: 0;
    padding: 0;
    width: 100% !important;
    float: none !important;
  }

  /* Override specific menu item styling for mobile */
  #menu-item-146 > .sfm-submenu-grid > .sfm-submenu > li {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  /* Each column group (section) */
  .sfm-submenu-column {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    float: none !important;
  }

  /* Section header (clickable if has children, just text if not) */
  .sfm-column-header {
    margin: 0;
    background: rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .sfm-submenu-column:first-child .sfm-column-header {
    border-top: none;
  }

  .sfm-column-header a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px 8px 40px;
    font-weight: 500;
    line-height: 1.3;
  }

  /* Reset any inherited ::after on column header links */
  .sfm-column-header a::after {
    content: none !important;
    display: none !important;
  }

  /* Add indicator only for section headers with children */
  .sfm-submenu-column:has(.sfm-submenu-column-children .sfm-submenu li) .sfm-column-header a::after {
    content: var(--sfm-dropdown-icon) !important;
    display: inline-flex !important;
    font-size: 20px;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
  }

  /* Rotate indicator when section is expanded */
  .sfm-submenu-column.expanded .sfm-column-header a::after {
    transform: rotate(-90deg);
  }

  .sfm-column-divider {
    display: none;
  }

  /* Children container */
  .sfm-submenu-column-children {
    display: none;
    padding: 0;
    background: rgba(0, 0, 0, 0.4);
  }

  .sfm-submenu-column.expanded .sfm-submenu-column-children {
    display: block;
  }

  .sfm-submenu-column-children .sfm-submenu {
    padding: 0;
    list-style: none;
  }

  .sfm-submenu-column-children .sfm-submenu > li {
    margin: 0;
  }

  .sfm-submenu-column-children .sfm-submenu > li > a {
    display: block;
    padding: 6px 20px 6px 60px;
    line-height: 1.4;
    transition: background 0.2s ease, padding-left 0.2s ease;
  }

  .sfm-submenu-column-children .sfm-submenu > li > a:hover,
  .sfm-submenu-column-children .sfm-submenu > li > a:active {
    background: rgba(255, 255, 255, 0.08);
    padding-left: 65px;
  }

  .sfm-submenu-container {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--sfm-menu-active-color);
    margin-left: 20px;
    display: none;
  }

  .sfm-has-submenu.sfm-active > .sfm-submenu-container {
    display: block;
  }

  .sfm-layout-mega .sfm-submenu,
  .sfm-layout-full-width .sfm-submenu {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .sfm-has-submenu[data-columns] .sfm-submenu {
    display: flex;
    flex-direction: column;
  }

  .sfm-layout-full-width .sfm-submenu-container {
    transform: none;
    width: 100%;
  }
}

html.sfm-mobile-menu-open,
body.sfm-mobile-menu-open {
  overscroll-behavior: none;
}

/* ==================================
   Accessibility
   ================================== */
.sfm-menu a:focus {
  outline: 2px solid var(--sfm-menu-hover-color);
  outline-offset: -2px;
}

.sfm-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--sfm-menu-active-color);
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100;
}

.sfm-skip-link:focus {
  top: 0;
}

/* ==================================
   Print Styles
   ================================== */
@media print {
  .sfm-submenu-container {
    display: none !important;
  }
}

/* ==================================
   RTL Support
   ================================== */
[dir="rtl"] .sfm-menu {
  direction: rtl;
}

[dir="rtl"] .sfm-submenu .sfm-submenu-container {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 1px;
}

[dir="rtl"] .sfm-submenu > li > a {
  border-left: none;
  border-right: 0 solid transparent;
}

[dir="rtl"] .sfm-submenu > li > a:hover,
[dir="rtl"] .sfm-submenu > li > a:focus {
  color: var(--sfm-menu-hover-color);
}