/* =========================================================
   Truckers Helper UI Utilities (modernized + legacy merge)
   ========================================================= */

/* Palette + small UI helpers */
:root {
  --primary:#0B3D2E;
  --primary-ink:#ecf0f1;
  --ink:#222;
  --muted:#6b7280;
  --shell-w:900px; /* unified content rail for banner/menu (740px banner + 160px accordion) */
}

/* ---------- Generic button ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .9rem; border-radius:.5rem;
  border:1px solid transparent; background:var(--primary); color:var(--primary-ink);
  font:600 13px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-decoration:none; cursor:pointer; user-select:none;
  transition:filter .15s ease,opacity .15s ease;
}
.btn:hover{filter:brightness(1.1);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn--sm{padding:.35rem .6rem;font-size:12px;border-radius:.375rem;}
.btn--ghost{background:transparent;color:var(--primary);border-color:var(--primary);}
.btn--light{background:#f3f4f6;color:#111827;border-color:#e5e7eb;}

/* ---------- Brand area ---------- */
.brand-logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;}
.brand-logo img{max-height:56px;height:auto;width:auto;display:block;}

/* ---------- Auth button cluster ---------- */
.auth-actions{display:flex;gap:.5rem;align-items:center;}
.auth-actions .btn{white-space:nowrap;}

/* ---------- Base layout helpers ---------- */
/* =========================================================
   CRITICAL: Navigation menu container - MUST ALWAYS BE VISIBLE
   ========================================================= */
.BASE{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  overflow-x:hidden;
}
.BASE--logo{width:var(--shell-w);max-width:100vw;margin:0 auto;padding-top:10px;
  display:flex;flex-direction:column;align-items:flex-start;}

/* Navigation menu container - force visibility with highest specificity */
.BASE .BASE--menu,
div.BASE .BASE--menu,
body .BASE .BASE--menu{
  width:var(--shell-w);
  max-width:100vw;
  margin:0 auto;
  display:flex !important; /* Force display */
  visibility: visible !important; /* Force visibility */
  opacity: 1 !important; /* Force opacity */
  align-items:center;
  min-height:40px;
  position:relative !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:auto !important;
  z-index:100;
}

.main-content{width:var(--shell-w);max-width:100vw;margin:0 auto;}
.clear{clear:both;display:block;}
.hide{display:none;visibility:visible;}

/* ---------- Top menu / hero skins ---------- */
/* Workflow tabs on home page (div#top-menu) */
div#top-menu{
  background-image:url(/images/Truckers-03.jpg);
  background-repeat:repeat-x;
  height:23px;
  padding-top:5px;
  width:900px; /* Match banner + accordion total width */
  margin:0 auto;
  margin-bottom:0;
  padding-bottom:0;
  position:relative;
  display:block;
  line-height:0;
  font-size:0; /* Eliminate whitespace gap between inline elements */
  vertical-align:bottom;
}
#hero-row{
  position:relative;
  width:900px;
  min-height:191px;
  margin:0 auto;
  margin-top:0;
  padding-top:0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
} /* 740px banner + 160px accordion */
#banner{
  background-image:url(/images/Truckers-06.jpg);
  background-repeat:repeat-x;
  height:191px;
  width:740px; /* Fixed width - do not use 100% */
  position:relative;
  margin:0;
  padding:0;
}
.active{color:#2A4615;font:700 12px Arial,Helvetica,sans-serif;display:block;float:left;
  background-image:url(/images/menu-active-02.jpg);background-repeat:repeat-x;height:20px;padding-top:5px;}
.acive-left{background-image:url(/images/menu-active-left.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}
.acive-right{background-image:url(/images/menu-active-right.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}
.inactive{color:#fff;font:400 12px Arial,Helvetica,sans-serif;display:block;float:left;
  background-image:url(/images/inactive-02.jpg);background-repeat:repeat-x;height:20px;padding-top:5px;}
.inacive-left{background-image:url(/images/inactive-left.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}
.inacive-right{background-image:url(/images/inactive-right.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}

/* ---------- Announcement strips ---------- */
.announce{width:655px;margin-top:25px;padding-left:70px;float:left;margin-bottom:25px;margin-right:5px;}
.announce-banner{height:39px;width:180px;background-image:url(/images/Truckers-21.jpg);background-repeat:no-repeat;float:left;display:block;}
.announce-left{height:39px;width:7px;background-image:url(/images/Truckers-20.jpg);background-repeat:no-repeat;display:block;float:left;}
.announce-spacer{height:39px;width:450px;background-image:url(/images/Truckers-22.jpg);background-repeat:repeat-x;display:block;float:left;}
.announce-right{height:39px;width:7px;background-image:url(/images/Truckers-23.jpg);background-repeat:no-repeat;display:block;float:left;}
.announce-text2{font-size:10pt;margin:15px 10px;}
.announcement-header{font-size:14px;font-weight:400;color:#DF8300;text-decoration:underline;}

/* =========================================================
   Masthead alignment patch (banner + top menu)
   ========================================================= */
.masthead{display:flex;flex-direction:column;align-items:center;margin:0 auto;padding:0;}
.masthead .BASE--logo,
.masthead .BASE--menu{
  width:var(--shell-w);
  max-width:100%;
  margin:0 auto;
  padding:0;
}
.masthead .BASE--logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.masthead .BASE--menu{
  position:relative;
  top:-3px;           /* pull up menu flush with banner */
  margin-top:0;
}
/* GPU acceleration for smooth rendering */
ul.top-menu, ul.jd_menu, div#top-menu, #banner{
  transform:translateZ(0);
}

/* Reset legacy UL menu quirks - FORCE VISIBILITY */
/* ONLY apply flex to TOP-LEVEL menu, not nested dropdowns */
.BASE--menu > ul.top-menu,
body .BASE--menu > ul.top-menu{
  list-style:none;
  margin:0;
  margin-bottom:2px; /* Minimal spacing between navigation menu and workflow tabs */
  padding:0;
  display:flex !important; /* Force display, prevent accidental hiding */
  visibility: visible !important; /* Force visibility */
  opacity: 1 !important; /* Force opacity */
  align-items:center;
  gap:0px;
  flex-direction:row; /* Horizontal layout for top menu */
}

ul.top-menu>li,
.BASE--menu ul.top-menu>li{
  margin:0;
  padding:0;
  position:relative; /* For positioning dropdowns */
  display: inline-block !important; /* Force inline-block to prevent hiding */
  visibility: visible !important; /* Force visibility */
}

/* Dropdown submenu styling */
ul.top-menu li ul{
  display:none !important; /* Hidden by default - override any other rules */
  position:absolute;
  left:0;
  top:100%;
  background:#0B3D2E;
  list-style:none;
  margin:0;
  padding:0;
  min-width:200px;
  z-index:10000;
  box-shadow:0 2px 5px rgba(0,0,0,0.3);
}

/* Show ONLY first-level dropdown on hover of top-level item */
ul.top-menu > li:hover > ul{
  display:block !important; /* Block = vertical stacking */
}

/* Nested submenu items - must be block for vertical stacking */
ul.top-menu li ul li{
  position:relative;
  display:block !important; /* Block display for vertical stacking */
  margin:0;
  padding:0;
}

/* Hide ALL nested submenus by default (2nd, 3rd level, etc.) */
ul.top-menu li ul li ul{
  display:none !important; /* Force hide with !important */
  left:100%; /* Position to the right of parent */
  top:0;
  position:absolute;
  background:#0B3D2E;
  list-style:none;
  margin:0;
  padding:0;
  min-width:200px;
  z-index:10001;
  box-shadow:0 2px 5px rgba(0,0,0,0.3);
}

/* Show 2nd-level submenu ONLY when hovering over its immediate parent */
ul.top-menu li ul li:hover > ul{
  display:block !important; /* Block = vertical stacking */
}

/* 3rd level nested submenus */
ul.top-menu li ul li ul li ul{
  display:none !important;
  left:100%;
  top:0;
  position:absolute;
  background:#0B3D2E;
  list-style:none;
  margin:0;
  padding:0;
  min-width:200px;
  z-index:10002;
  box-shadow:0 2px 5px rgba(0,0,0,0.3);
}

/* Show 3rd-level submenu ONLY when hovering over its immediate parent */
ul.top-menu li ul li ul li:hover > ul{
  display:block !important;
}

/* Menu item styling in dropdowns */
ul.top-menu li ul li a{
  display:block;
  padding:8px 15px;
  white-space:nowrap;
  color:#FFF;
  text-decoration:none;
}

ul.top-menu li ul li a:hover{
  background:#1a5c43;
}

/* jdMenu uses float-based layout from jquery.jdMenu.css - don't apply flexbox */
ul.jd_menu{
  list-style:none;
  margin:0;
  padding:0;
}
ul.jd_menu>li{margin:0;padding:0;}

/* =========================================================
   FINAL SAFETY NET: Force navigation menu visibility
   This rule has highest priority to override any conflicting styles
   ========================================================= */
body .BASE .BASE--menu,
body .BASE .BASE--menu > ul.top-menu,
html body .BASE .BASE--menu,
html body .BASE .BASE--menu > ul.top-menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ONLY top-level menu items should be inline-block (horizontal) */
body .BASE .BASE--menu > ul.top-menu > li {
  display: inline-block !important;
}

/* Dropdown items MUST be block (vertical stacking) */
body .BASE .BASE--menu ul.top-menu li ul li {
  display: block !important;
}

.main-menu{background:#0B3D2E;width:var(--shell-w);margin:0 auto;box-sizing:border-box;}
.main-menu ul li a{text-decoration:none;}
.main-menu ul li a:hover{text-decoration:underline;}

/* Workflow accordion pinned to right of banner */
#workflow_accordian{position:absolute;right:0;top:0;}