/*
 * Organizational Chart Widget – Pure CSS Tree Layout
 * REVISED: Fixes root node visibility, overflow scrolling, theme CSS interference
 *
 * Key fixes in this version
 * ──────────────────────────────────────────────────────────────────────────
 * 1. Overflow centering bug: Replaced flex+justify-content on the container
 *    with overflow-x:auto + text-align:center so scroll starts at x=0.
 * 2. Root node invisible: Added !important to all visual node properties so
 *    WordPress theme CSS cannot override them.
 * 3. Theme ul/li interference: Aggressive reset using !important on margin,
 *    padding, list-style for every ul and li inside the wrapper.
 * 4. Arrow tips: Kept as ::after pseudo-elements on .org-node.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1.  HARD RESET  –  override any WordPress / theme styles on lists
   ═══════════════════════════════════════════════════════════════════════════ */

.org-chart-wrapper *,
.org-chart-wrapper *::before,
.org-chart-wrapper *::after {
  box-sizing: border-box;
}

.org-chart-wrapper ul,
.org-chart-wrapper ol {
  margin:      0 !important;
  padding:     0 !important;
  list-style:  none !important;
  border:      none !important;
  background:  none !important;
}

.org-chart-wrapper li {
  margin:       0 !important;
  padding:      0 !important;
  list-style:   none !important;
  border:       none !important;
  background:   none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2.  WRAPPER  &  HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.org-chart-wrapper {
  font-family: "Poppins", sans-serif !important;
  padding: 20px 10px 20px;
}

.org-chart-title {
  color: #2952a3;
  font-family: "Poppins", sans-serif !important;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 30px !important;
  padding: 0;
  text-align: left;
}
.org-chart-footnote {
    color: #2952a3;
    font-size: 0.8em;
    font-style: italic;
    margin: 22px 0 0 !important;
    text-align: left;
    font-family: "Poppins", sans-serif !important;
    line-height: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3.  CHART SCROLL CONTAINER
   Strategy: overflow-x:auto on .org-chart, text-align:center centres the
   inline-flex root UL. When the tree is wider than the container it can be
   scrolled normally (no negative-offset clipping). This solves the
   flex+justify-content centering overflow bug.
   ═══════════════════════════════════════════════════════════════════════════ */

.org-chart {
  padding:      10px 24px 30px;
  /* Use flex-start instead of center to prevent the left side from being clipped when scrolling */
  display:      -webkit-flex !important;
  display:      flex !important;
  justify-content: flex-start !important;
  text-align:   left !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4.  ALL ULs  (default: flex row of children)
   ═══════════════════════════════════════════════════════════════════════════ */

.org-chart ul {
  display:          -webkit-flex;
  display:          flex;
  flex-direction:   row;
  justify-content:  center;
  align-items:      flex-start;
  list-style:       none !important;
  margin:           0 !important;
  padding:          0 !important;
  position:         relative;
  /* Prevent UL from shrinking below its natural content width.
     Without this, justify-content:center clips the left side. */
  min-width:        -webkit-max-content !important;
  min-width:        max-content !important;
  flex-shrink:      0 !important;
}

/* ── Root UL only: inline-flex so text-align:center can centre it ── */
.org-chart > ul,
.org-chart ul.org-root-ul {
  display:    -webkit-flex !important;
  display:    flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin:     0 !important;
  min-width:  -webkit-max-content !important;
  min-width:  max-content !important;
}

/* Root LI must not have any connector padding */
.org-chart li.org-root-li {
  padding-top: 0 !important;
  /* Must be at least as wide as the widest nested subtree so
     align-items:center truly centres the root node above all children */
  min-width:   -webkit-max-content !important;
  min-width:   max-content !important;
  flex-shrink: 0 !important;
}
/* Root LI pseudo-elements must not show any connector lines */
.org-chart li.org-root-li::before,
.org-chart li.org-root-li::after {
  display: none !important;
}


/* ── Nested ULs: margin-top gap for the parent→children connector line ── */
.org-chart ul ul {
  margin-top: 48px !important;
  position:   relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5.  CONNECTOR — vertical line: parent-node-bottom → children's h-bar
   ═══════════════════════════════════════════════════════════════════════════ */

.org-chart ul ul::before {
  content:          '';
  position:         absolute;
  top:              -48px;        /* climbs up into the margin-top gap     */
  left:             calc(50% - 1px);
  width:            2px;
  height:           48px;
  background-color: #5b93c8;
  pointer-events:   none;
  z-index:          2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6.  LIST ITEMS
   ═══════════════════════════════════════════════════════════════════════════ */

.org-chart li {
  display:        -webkit-flex;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        0 8px !important;
  position:       relative;
  list-style:     none !important;
  /* Prevent li from shrinking – keeps each column at its natural width */
  flex-shrink:    0 !important;
  min-width:      -webkit-max-content !important;
  min-width:      max-content !important;
}

/* Nested li: padding-top = space for the horizontal junction bar + vert drop */
.org-chart ul ul > li {
  padding-top: 48px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7.  CONNECTOR — horizontal junction bar (left half + right half)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Left half */
.org-chart ul ul > li::before {
  content:          '';
  position:         absolute;
  top:              0;
  left:             0;
  right:            50%;
  height:           2px;
  background-color: #5b93c8;
  pointer-events:   none;
}

/* Right half */
.org-chart ul ul > li::after {
  content:          '';
  position:         absolute;
  top:              0;
  left:             50%;
  right:            0;
  height:           2px;
  background-color: #5b93c8;
  pointer-events:   none;
}

/* First child: suppress left bar extension (node is at far left) */
.org-chart ul ul > li:first-child::before {
  left: 50%;  /* collapses to zero width */
}

/* Last child: suppress right bar extension */
.org-chart ul ul > li:last-child::after {
  right: 50%;  /* collapses to zero width */
}

/* Only child: no horizontal bar needed — parent ul::before connects all */
.org-chart ul ul > li:only-child {
  padding-top: 0 !important;
}
.org-chart ul ul > li:only-child::before,
.org-chart ul ul > li:only-child::after {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8.  CONNECTOR — vertical drop: h-bar → node-top
       and arrow tip at node-top
   Applied via .org-node pseudo-elements.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Make all nested-level nodes a positioning context */
.org-chart ul ul > li > .org-node {
  position: relative !important;
}

/* Vertical drop line (not for only-child — handled by parent ul::before) */
.org-chart ul ul > li:not(:only-child) > .org-node::before {
  content:          '';
  position:         absolute;
  top:              -57px;
  left:             calc(50% - 1px);
  width:            2px;
  height:           48px;
  background-color: #5b93c8;
  pointer-events:   none;
  z-index:          2;
}

/* Arrow tip — downward triangle just above the node */
.org-chart ul ul > li > .org-node::after {
  content:       '';
  position:      absolute;
  top:           -20px;
  left:          calc(50% - 6px);
  width:         0;
  height:        0;
  border-left:   6px solid transparent;
  border-right:  6px solid transparent;
  border-top:    11px solid #5b93c8;
  pointer-events: none;
  z-index:       3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9.  ROOT NODE — suppress arrow / drop (nothing connects from above)
   ═══════════════════════════════════════════════════════════════════════════ */

.org-chart > ul > li > .org-node::before,
.org-chart > ul > li > .org-node::after,
.org-chart li.org-root-li > .org-node::before,
.org-chart li.org-root-li > .org-node::after {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. NODE BOXES
   All styles use !important so WordPress themes cannot override them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Default node (light-blue gradient) ── */
.org-node {
    display: -webkit-flex !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 115px !important;
    min-height: 60px !important;
    padding: 8px 8px !important;
    background: linear-gradient(180deg, #daeaf8 0%, #aecde8 100%) !important;
    border: 2px solid #5b93c8 !important;
    border-radius: 8px !important;
    color: #1a3a5c !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 0.78em !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: center !important;
     flex-shrink: 0 !important;
    text-decoration: none !important;
    position: relative;
    border-top: 10px solid #2952a3 !important;
}

/* ── Root node (dark-blue gradient, white text) ── */
.org-node.org-node--root {
  background:    linear-gradient(180deg, #5b93c8 0%, #2f6095 100%) !important;
  border:        2px solid #1e4a7a !important;
  border-radius: 8px !important;
  color:         #ffffff !important;
  font-weight:   700 !important;
  font-size:     0.9em !important;
  width:         155px !important;
  min-height:    72px !important;
  box-shadow:    2px 3px 10px rgba(26, 60, 100, 0.30) !important;
}

/* ── Bold leaf node (dark-blue, white text, bold) ── */
.org-node.org-node--bold {
    /*background: #2952a3 ! IMPORTANT;*/
    /*border: 2px solid #2952a3 !important;*/
   
   
    width: 185px !important;
    min-height: 60px !important;
    border-top: 10px solid #2952a3 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. LOWERED NODES (Mortgage Refinance & Non-operating bank holding)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Push the li down to align with depth-2 nodes */
.org-chart li.org-li-lowered {
  padding-top: 156px !important;
}
/* Extend the vertical drop connector to reach the top horizontal bar */
.org-chart li.org-li-lowered > .org-node::before {
  height: 156px !important;
  top: -165px !important;
}

.overview-sec-one .chart-another-row .org-chart::-webkit-scrollbar {  height: 8px;}
.overview-sec-one .chart-another-row .org-chart::-webkit-scrollbar-track {  background: #2952a336 !important;}
.overview-sec-one .chart-another-row .org-chart::-webkit-scrollbar-thumb {  background: #2952a3 !important;  border-radius: 10px;}
.overview-sec-one .chart-another-row .org-chart::-webkit-scrollbar-thumb:hover {  background: #2f6392 !important;}
.overview-sec-one .chart-another-row  ul li {align-items: center !important;gap:0 !important;padding-inline: 5px !important;} 
.margin-padding-none > .elementor-container.elementor-column-gap-default { padding-inline: 0 !important;}
.chart-another-row .org-chart-wrapper { padding: 0 !IMPORTANT;}
.chart-another-row .org-chart-wrapper .org-chart {  padding-inline: 0 !important;}
.overview-sec-one .chart-another-row .org-chart li.org-root-li {  padding-inline: 0 !IMPORTANT; font-family: "Poppins", sans-serif !important;}
.overview-sec-one .chart-another-row .org-chart li.org-root-li .org-node.org-node--root {font-family: "Poppins", sans-serif !important;background: #2952a3 !important;}
.overview-sec-one .chart-another-row ul li {
    margin-bottom: 0 !important;
}

.overview-sec-one .chart-another-row ul li.org-li-private > ul {
    position: absolute;
    top: 132px;    padding-left: 20px !important;
}
.overview-sec-one .chart-another-row ul li.org-li-mortgage_rc.org-li-lowered {
    position: absolute;
    right: 188px;
}
.overview-sec-one .chart-another-row ul li.org-li-nob_holding.org-li-lowered {
    position: absolute;
    right: 63px;
}
/*.overview-sec-one .chart-another-row ul li.org-li-private > ul ul .org-node.org-node--bold::after {*/
/*    top: -12px;*/
/*}*/

 .org-chart ul.org-root-ul {
    padding-bottom: 320px !important; 
}
/* ═══════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .chart-another-row .org-chart-wrapper .org-chart {
    /*overflow: visible;    */
}
}
@media (max-width: 1024px) {
  .org-chart {
    padding: 10px 10px 30px;
  }
 
.overview-sec-one .chart-another-row{
/*width:100% !important;*/
/*max-width:100% !important;*/
}
.page-id-391 .elementor-sidebar-container {
    display: block;
    width: 100%;
    max-width: 100%;
}
 .org-chart ul.org-root-ul {
    padding-bottom: 320px !important;
    overflow-x: scroll !IMPORTANT;
}
.chart-another-row .org-chart-wrapper .org-chart {
     overflow-x: scroll;
}

}

@media (max-width: 768px) {
  .org-node {
    width:     100px !important;
    font-size: 0.7em !important;
    min-height: 50px !important;
  }
  .org-node.org-node--root {
    width:     120px !important;
    font-size: 0.8em !important;
    min-height: 60px !important;
  }
  .org-node.org-node--bold {
    width:     118px !important;
  }
  .overview-sec-one .chart-another-row ul li.org-li-mortgage_rc.org-li-lowered {
    right: 166px;
}
.overview-sec-one .chart-another-row ul li.org-li-nob_holding.org-li-lowered {
    right: 55px;
}
.overview-sec-one .chart-another-row ul li.org-li-private > ul {
    top: 108px;
}
}