/*
 * Fortis Nav — Frontend Styles v2.4.5
 * Built by GTU (gtu.com)
 *
 * MMMP handles column widths via --span CSS variables.
 * We only apply background colours, typography, and spacing.
 */

:root {
  --fn-navy:             #1B2A4A;
  --fn-orange:           #FF6B00;
  --fn-orange-light:     #ec6403;
  --fn-white:            #ffffff;
  --fn-gray-bg:          #F6F6F6;
  --fn-gray-divider:     #E2E8F0;
  --fn-gray-text:        #64748B;
  --fn-dropdown-shadow:  0 8px 40px rgba(0,0,0,0.18);
  --fn-anim-speed:       300ms;
  --fn-dropdown-radius:  20px;
  --fn-dropdown-offset:  16px;
  --fn-panel-width:      92vw;
}

/* ===================================================================
   KILL OLD THEME STYLESHEET LEFTOVERS
   =================================================================== */

/* Kill fixed-position full-page panel */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu {
  position: absolute !important;
  height: auto !important;
  min-height: auto !important;
  max-width: 96vw !important;
  overflow: hidden !important;
  display: block !important;
  background: var(--fn-white) !important;
  border-radius: var(--fn-dropdown-radius) !important;
  box-shadow: var(--fn-dropdown-shadow) !important;
  border: none !important;
  margin-top: var(--fn-dropdown-offset) !important;
  padding: 0 !important;
  left: 0 !important;
  top: 100% !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  gap: unset !important;
  align-items: unset !important;
}

/* Kill 345px white card boxes */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
  min-height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Kill text-align center */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 { text-align: left !important; }

/* ===================================================================
   FORCE BORDER-RADIUS + BOX-SHADOW
   Overrides MMMP's own style.css which sets border-radius:0
   =================================================================== */

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout > ul.mega-sub-menu {
  border-radius: var(--fn-dropdown-radius) !important;
  box-shadow: var(--fn-dropdown-shadow) !important;
  border: none !important;
  background: var(--fn-white) !important;
  overflow: hidden !important;
}

/* ===================================================================
   GLOBAL COLOR RESET
   MMMP sets color:white on everything — override with navy.
   :not(.mega-menu-no-link) protects orange section headers.
   =================================================================== */

#mega-menu-wrap-menu-1 #mega-menu-menu-1 ul.mega-sub-menu li.mega-menu-item:not(.mega-menu-no-link) a.mega-menu-link,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 ul.mega-sub-menu li.mega-menu-row,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 ul.mega-sub-menu li.mega-menu-column {
  color: var(--fn-navy) !important;
}

/* ===================================================================
   CHEVRON — Font Awesome 6, 16px
   White default → orange when open → rotated 180°
   =================================================================== */

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
  font-size: 0 !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
  margin-left: 5px !important;
  position: relative !important;
  top: -1px !important;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link > span.mega-indicator::before {
  content: "\f078";
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
  font-weight: 900;
  font-size: 16px !important;
  color: inherit;
  display: block;
  line-height: 16px;
  transition: transform 0.25s ease;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator::before {
  transform: rotate(180deg);
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
  color: var(--fn-orange) !important;
}

/* ===================================================================
   STANDARD 1-COL FLYOUT — 14px links
   =================================================================== */

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout > ul.mega-sub-menu {
  padding: 6px 0 !important;
  min-width: 200px !important;
  min-height: auto !important;
  position: absolute !important;
  height: auto !important;
  left: 0 !important;
  top: 100% !important;
  margin-top: var(--fn-dropdown-offset) !important;
}

#mega-menu-wrap-menu-1 li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  display: block !important;
  padding: 8px 18px !important;
  color: var(--fn-navy) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background 0.18s ease !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

#mega-menu-wrap-menu-1 li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
  background: var(--fn-gray-bg) !important;
  color: var(--fn-navy) !important;
}

/* ===================================================================
   GRID ROW — let MMMP control widths, we only set backgrounds
   =================================================================== */

/* ::after pseudo-element paints the right 33.33% (4/12) gray.
/* ===================================================================
   GRID ROW + COLUMNS
   
   APPROACH: Gradient on the outer panel (overflow:hidden) paints
   the right 33.33% (4/12) gray for the FULL panel height automatically.
   Columns are transparent so gradient shows through. This works for
   ALL current and future 2-col dropdowns with no classes needed.
   
   Left divider line drawn on left column only.
   =================================================================== */

/* Outer panel gets the gradient — covers full height via overflow:hidden */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu {
  background: linear-gradient(
    to right,
    var(--fn-white)   calc(66.66% - 2px),
    #cccccc           calc(66.66% - 2px),
    #cccccc           66.66%,
    #F6F6F6           66.66%
  ) !important;
}

/* Row li — clear floats so panel height is correct */
#mega-menu-wrap-menu-1 ul.mega-sub-menu > li.mega-menu-row {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Row inner ul */
#mega-menu-wrap-menu-1 li.mega-menu-row > ul.mega-sub-menu {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: static !important;
}

/* All columns — transparent so gradient on parent shows through */
#mega-menu-wrap-menu-1 li.mega-menu-column {
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Left column — white drawn by gradient, add the divider line */
#mega-menu-wrap-menu-1 li.mega-menu-column.mega-menu-columns-8-of-12 {
  padding: 12px 0 !important;
}

/* Right column — gray drawn by gradient, just needs padding */
#mega-menu-wrap-menu-1 li.mega-menu-column.mega-menu-columns-4-of-12,
#mega-menu-wrap-menu-1 li.mega-menu-column.mega-fortis-col-right {
  padding: 12px 0 !important;
}


/* Column inner ul — SCOPED to mega-toggle-on.
   MMMP v2.4+ uses visibility:hidden (not display:none) on nested sub-menus,
   so a global visibility:visible overrides ALL dropdowns simultaneously and
   causes closed-dropdown children to bleed into the open dropdown.
   Scoping to > li.mega-toggle-on ensures only the ACTIVE dropdown is affected. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-toggle-on li.mega-menu-column > ul.mega-sub-menu {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: auto !important;
  overflow: visible !important;
  height: auto !important;
}

/* Show children of .mega-menu-no-link section headers (e.g. Integrations, Industries)
   SCOPED to (a) no-link items only, and (b) the currently-open top-level item only.
   Double-scoped so NEITHER the wrong item type NOR a closed dropdown can leak through. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-toggle-on li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-no-link > ul.mega-sub-menu {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

/* ===================================================================
   DROPDOWN ITEMS — 15px titles, 13px descriptions
   =================================================================== */

#mega-menu-wrap-menu-1 li.mega-menu-column ul.mega-sub-menu > li.mega-menu-item {
  display: block !important;
  float: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  min-height: auto !important;
  border-radius: 0 !important;
}

#mega-menu-wrap-menu-1 li.mega-menu-column ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  display: block !important;
  padding: 8px 20px !important;
  color: var(--fn-navy) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-decoration: none !important;
  text-transform: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  transition: background 0.18s ease !important;
}

/* Left column hover — all columns, any count, future-proof */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-no-link) > a.mega-menu-link:hover,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-no-link):hover > a.mega-menu-link {
  background: rgba(0,0,0,0.06) !important;
  color: var(--fn-navy) !important;
}

/* Apply hover to LI level — fixes dead zones on items with descriptions
   Background on li covers the full row including gaps between title and description */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-no-link):hover {
  background: rgba(0,0,0,0.06) !important;
}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-no-link):hover > a.mega-menu-link {
  background: transparent !important;
}

/* MAXIMUM SPECIFICITY — full grid path targets every item in every column
   including the first item which MMMP's own CSS overrides with lower rules */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-no-link):hover,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-no-link) > a.mega-menu-link:hover {
  background: rgba(0,0,0,0.06) !important;
  color: var(--fn-navy) !important;
  text-decoration: none !important;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-no-link):hover > a.mega-menu-link {
  background: transparent !important;
}

/* FIRST-CHILD explicit hover — MMMP sometimes applies a first-child rule
   at high specificity that beats the generic :hover above.
   Match the Kill-345px selector exactly, add :first-child + :hover. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:first-child:not(.mega-menu-no-link):hover {
  background: rgba(0,0,0,0.06) !important;
}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:first-child:not(.mega-menu-no-link):hover > a.mega-menu-link {
  background: transparent !important;
  color: var(--fn-navy) !important;
}

/* DESCRIPTION DEAD-ZONE fix — items whose description renders outside <a>.
   LI-level hover paints background across the full row including description gap.
   Must match Kill-345px specificity exactly so !important cascade honours :hover. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-no-link):hover {
  background: rgba(0,0,0,0.06) !important;
}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-no-link):hover > a.mega-menu-link {
  background: transparent !important;
}

/* Description — 13px, not italic */
#mega-menu-wrap-menu-1 li.mega-menu-column ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link span.mega-menu-description {
  display: block !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--fn-gray-text) !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

/* ===================================================================
   SECTION HEADER — .mega-menu-no-link (e.g. "Integrations")
   Orange, 13px, not clickable
   =================================================================== */

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item.mega-menu-no-link > a.mega-menu-link,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item.mega-menu-no-link > a.mega-menu-link:hover,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item.mega-menu-no-link > a.mega-menu-link:visited {
  color: var(--fn-orange) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 12px 20px 6px !important;
  pointer-events: none !important;
  cursor: default !important;
  background: transparent !important;
}

/* ===================================================================
   DEPTH 2 — Right col children (Acumatica, eCommerce etc.)
   14px, flush left — styling only; visibility is handled by the
   mega-toggle-on–scoped no-link rule above.
   REMOVED: position/display/visibility overrides from this broad selector.
   Those were causing Solutions/Industries children to bleed into the
   Products right column on MMMP v2.4+ (which hides via visibility, not display).
   =================================================================== */

#mega-menu-wrap-menu-1 li.mega-menu-column ul.mega-sub-menu li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item {
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
  background: transparent !important;
  min-height: auto !important;
}

#mega-menu-wrap-menu-1 li.mega-menu-column ul.mega-sub-menu li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  display: block !important;
  padding: 7px 20px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--fn-navy) !important;
  background: transparent !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}

/* Right column depth-2 hover — all nested links, future-proof */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column ul.mega-sub-menu li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column ul.mega-sub-menu li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item:hover > a.mega-menu-link {
  background: rgba(0,0,0,0.06) !important;
  color: var(--fn-navy) !important;
}


/* ===================================================================
   UNIVERSAL DROPDOWN HOVER — future-proof for any column layout
   =================================================================== */

/* All clickable dropdown links — works for any column count */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 ul.mega-sub-menu li.mega-menu-item:not(.mega-menu-no-link):not(.mega-fortis-col-right) > a.mega-menu-link:hover,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column ul.mega-sub-menu li.mega-menu-item:not(.mega-menu-no-link) > a.mega-menu-link:hover,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-no-link) > a.mega-menu-link:hover {
  background: rgba(0,0,0,0.06) !important;
  color: var(--fn-navy) !important;
  text-decoration: none !important;
}

/* Section headers — MUST come AFTER hover rule to win the cascade.
   Triple-class specificity beats the hover rule above. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 ul.mega-sub-menu li.mega-menu-item.mega-menu-no-link.mega-menu-no-link > a.mega-menu-link,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 ul.mega-sub-menu li.mega-menu-item.mega-menu-no-link.mega-menu-no-link > a.mega-menu-link:hover,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 ul.mega-sub-menu li.mega-menu-item.mega-menu-no-link.mega-menu-no-link > a.mega-menu-link:focus,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column ul.mega-sub-menu li.mega-menu-item.mega-menu-no-link > a.mega-menu-link,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column ul.mega-sub-menu li.mega-menu-item.mega-menu-no-link > a.mega-menu-link:hover {
  background: transparent !important;
  color: #FF6B00 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* ===================================================================
   STACKING ORDER FOR BLUR/DIM OVERLAY
   Layer 8002: Dropdown panel  (always sharp, above everything)
   Layer 8001: Nav/header      (sharp, visually covers overlay top edge)
   Layer 8000: Blur/dim overlay
   Layer auto: Page content    (blurred/dimmed)

   isolation:isolate on the dropdown forces a new stacking context
   which prevents backdrop-filter from bleeding into the panel.
   =================================================================== */

/* Nav header sits above overlay — covers its top edge cleanly */
#masthead {
  z-index: 8001 !important;
}

/* Dropdown above everything — isolation stops backdrop-filter bleed */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > ul.mega-sub-menu,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout > ul.mega-sub-menu {
  z-index: 8002 !important;
  isolation: isolate !important;
}

/* ── Blur + Dim overlay (body.fn-blur-active) ── */
.fn-blur-overlay {
  position: fixed;
  top: -60px; /* Large enough to hide blur edge artifact on any screen */
  left: 0; right: 0; bottom: 0;
  z-index: 8000;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--fn-anim-speed) ease;
}
body.fn-blur-active .fn-blur-overlay {
  opacity: 1; pointer-events: none;
}

/* ── Dim-only overlay (body.fn-dim-active) — no blur ── */
body.fn-dim-active .fn-blur-overlay {
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(0,0,0,0.55); /* 15% darker dim-only */
  pointer-events: none;
}

/* ===================================================================
   MISC
   =================================================================== */

.mega-menu-toggle { display: none !important; }
#site-navigation, #mega-menu-wrap-menu-1 { overflow: visible !important; }
#popupMenuPanel, #popupOverlay, .site-overlay { display: none !important; }
#fortis-hamburger { display: none !important; }
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
  height: auto !important;
  line-height: 1.2 !important;
}

/* ===================================================================
   MOBILE DRAWER v2.3.0
   - Slides in from RIGHT (right:0, translateX(100%) → translateX(0))
   - 100% width on ALL screen sizes
   - FA chevron-right for menu items, color #FF6B00
   - X close button 45px, no focus outline
   - Separator lines respect item padding (not full bleed)
   - Login icon #D1441F
   - Contact us uses btn-primary class
   =================================================================== */

.fortis-mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(11,17,32,0.55);
  z-index: 9990; opacity: 0; pointer-events: none;
  transition: opacity var(--fn-anim-speed) ease;
}
.fortis-mobile-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* Drawer — full width, slides in from RIGHT */
.fortis-mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: 0;                          /* 100% width */
  width: 100%;                      /* full viewport always */
  z-index: 9999;
  overflow: hidden;
  transform: translateX(100%);      /* starts off-screen RIGHT */
  transition: transform var(--fn-anim-speed) cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.fortis-mobile-drawer.is-open {
  transform: translateX(0);
}

.fortis-mobile-viewport {
  position: relative; width: 100%; height: 100%; overflow: hidden;
}

/* Main panel starts visible */
.fortis-mobile-panel--main { transform: translateX(0); }

.fortis-mobile-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #ffffff;
  transition: transform var(--fn-anim-speed) cubic-bezier(0.4,0,0.2,1);
  will-change: transform; overflow: hidden;
}
.fortis-mobile-panel:not(.fortis-mobile-panel--main) { transform: translateX(100%); }
.fortis-mobile-panel.is-active        { transform: translateX(0) !important; }
.fortis-mobile-panel.is-exiting       { transform: translateX(-30%) !important; }
.fortis-mobile-panel.is-exiting-right { transform: translateX(100%) !important; }

/* ─── Panel header ───────────────────────────────────────────────── */

.fortis-mobile-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.fortis-mobile-logo {
  height: 28px;
  width: auto;
  display: block;
  /* PNG has dark background — use mix-blend-mode if needed */
}
.fortis-mobile-logo-link { display: inline-block; line-height: 1; }
.fortis-mobile-logo-link--text {
  font-size: 18px; font-weight: 700; color: var(--fn-navy); text-decoration: none;
}

/* Close button — 45px FA xmark, no outline on any state */
.fortis-mobile-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 45px; height: 45px;
  background: none; border: none; cursor: pointer;
  border-radius: 8px;
  transition: background 0.18s ease;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.fortis-mobile-close:focus,
.fortis-mobile-close:focus-visible,
.fortis-mobile-close:active {
  outline: none !important;
  box-shadow: none !important;
}
.fortis-mobile-close .fa-xmark {
  font-size: 24px;
  color: var(--fn-navy);
}
.fortis-mobile-close:hover { background: #f5f5f7; }

/* Back button */
.fortis-mobile-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: #FF6B00; font-size: 16px; font-weight: 600;
  padding: 4px 0; font-family: inherit;
  outline: none !important;
}
.fortis-mobile-back:hover { opacity: 0.75; }
.fortis-mobile-back .fa-chevron-left { font-size: 14px; }

/* ─── Nav scroll area ────────────────────────────────────────────── */

.fortis-mobile-nav { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fortis-mobile-list { list-style: none; margin: 0; padding: 0; }

/* Separator lines — respect padding, not full bleed (Figma style) */
.fortis-mobile-item {
  border-bottom: none;
}
.fortis-mobile-item + .fortis-mobile-item {
  border-top: none;
}
/* Draw line via padding box only */
.fortis-mobile-trigger,
.fortis-mobile-link {
  position: relative;
}
.fortis-mobile-item:not(:last-child) .fortis-mobile-trigger::after,
.fortis-mobile-item:not(:last-child) .fortis-mobile-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;   /* matches item left padding */
  right: 20px;  /* matches item right padding */
  height: 1px;
  background: #e2e8f0;
}

/* Trigger button (items with children) */
.fortis-mobile-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 18px 20px;
  background: none; border: none; cursor: pointer;
  text-align: left; color: var(--fn-navy);
  font-size: 17px; font-weight: 600; font-family: inherit;
  transition: background 0.18s ease;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.fortis-mobile-trigger:hover { background: #f9f9f9; }
.fortis-mobile-trigger-text { flex: 1 1 auto; }

/* FA chevron-right on triggers */
.fortis-mobile-chevron {
  color: #FF6B00 !important;
  font-size: 16px;
  flex-shrink: 0;
}

/* Plain nav link (no children) */
.fortis-mobile-link {
  display: block; padding: 18px 20px;
  color: var(--fn-navy); font-size: 17px; font-weight: 600;
  text-decoration: none; transition: background 0.18s ease;
}
.fortis-mobile-link:hover { background: #f9f9f9; color: var(--fn-navy); }

/* ─── Sub-panel list ─────────────────────────────────────────────── */

.fortis-mobile-sublist-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.fortis-mobile-sublist { list-style: none; margin: 0; padding: 0; }

/* No separator lines between top-section items (Figma has none) */
.fortis-mobile-subitem { border-bottom: none; }

/* Top section items */
.fortis-mobile-sublink {
  display: block;
  padding: 10px 20px;
  text-decoration: none !important;
  color: var(--fn-navy);
  transition: background 0.18s ease;
}
.fortis-mobile-sublink:hover {
  background: #f9f9f9;
  text-decoration: none !important;
}

/* Item title — NOT bold, 15px per Figma */
.fortis-mobile-sublink-title {
  display: block;
  font-weight: 400;
  font-size: 15px;
  color: var(--fn-navy);
  line-height: 1.3;
}

/* Description text */
.fortis-mobile-item-desc {
  display: block; font-size: 13px; color: #64748B;
  margin-top: 2px; font-weight: 400; line-height: 1.4;
}

/* Section divider — 2px #cccccc separating top items from Integrations section */
.fortis-mobile-section-label {
  padding: 14px 20px 10px;
  background: #F6F6F6;
  border-top: 2px solid #cccccc;
  border-bottom: none;
  flex-shrink: 0; /* label stays its natural height — does NOT stretch */
}
.fortis-mobile-section-label span {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #FF6B00;
  letter-spacing: normal;
  text-transform: none;
}

/* Nested links — no separator lines, gray bg fills to bottom */
.fortis-mobile-subitem--section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* this li stretches to fill remaining panel height */
}
.fortis-mobile-nested-list {
  list-style: none; margin: 0; padding: 0;
  background: #F6F6F6;
  flex: 1 1 auto; /* nested list fills the rest */
}
/* No separator lines between nested items */
.fortis-mobile-nested-list li { border-bottom: none; }

.fortis-mobile-sublink--nested {
  display: block;
  padding: 10px 20px;
  color: var(--fn-navy);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none !important;
  background: #F6F6F6;
  transition: background 0.18s ease;
}
.fortis-mobile-sublink--nested:hover {
  background: rgba(0,0,0,0.04);
  color: var(--fn-navy);
  text-decoration: none !important;
}

/* ─── CTA bar ────────────────────────────────────────────────────── */

.fortis-mobile-cta-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}

/* Login link */
.fortis-mobile-cta--login {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; font-size: 15px; font-weight: 600;
  color: var(--fn-navy); padding: 9px 16px;
  white-space: nowrap;
}
.fortis-mobile-cta--login:hover { opacity: 0.8; color: var(--fn-navy); }

/* Person icon — #D1441F */
.fortis-mobile-user-icon {
  color: #D1441F !important;
  font-size: 15px;
}

/* Chevron on login */
.fortis-mobile-cta--login .fortis-mobile-cta-chevron {
  color: var(--fn-navy);
  font-size: 13px;
}

/* Contact us — uses theme btn-primary class + our overrides */
.fortis-mobile-cta--contact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Fallback if btn-primary not available */
.fortis-mobile-cta--contact:not(.btn-primary) {
  color: #fff;
  background: linear-gradient(to bottom, #FF6B00 0%, #D64123 100%);
  border-radius: 40px !important;
  padding: 8px 24px !important;
  border: 1px solid #D64123 !important;
}

.fortis-mobile-cta--contact .fortis-mobile-cta-chevron {
  color: #fff;
  font-size: 13px;
}

/* ─── Hide mobile drawer above breakpoint ────────────────────────── */

@media (min-width: 1025px) {
  .fortis-mobile-drawer,
  .fortis-mobile-overlay { display: none !important; }
}

body.fortis-menu-open { overflow: hidden; }