/**
 * pe_platform_tabs_lite.css - styles for the pe_platform_tabs_lite block.
 * Linked by the block itself, so the module is self-sufficient on any page.
 *
 * Merged from the two page skins:
 *   pe_homepage_tpl.min.css  (single tab set, icomoon font icons)
 *   pe_pop_sept2025.css      (two groups, image icons + top-level #myTab nav)
 * Shared rules live unscoped below; skin differences are scoped to the block's
 * auto-added variant class: #tabs.pe-tabs--single vs #tabs.pe-tabs--groups.
 * Selectors keep the #tabs id so this file wins ties against the page CSS copies
 * (which remain in place for the original, non-speed templates).
 *
 * Active states are written for BOTH li.active and a.active - the block maintains
 * both, and the two page skins historically keyed off different ones.
 */

/* ---- functional rules (bootstrap-equivalent switching, no bootstrap needed) ---- */
/* top-level group panes: all widths */
#tabs .pe-tabs-groups > .tab-pane{display:none}
#tabs .pe-tabs-groups > .tab-pane.active{display:block}
/* nested panes: DESKTOP ONLY - below 992px the mobile block stacks all panes */
@media (min-width: 992px) {
  #tabs .tabs_images > .tab-pane{display:none}
  #tabs .tabs_images > .tab-pane.active{display:block}
  #tabs .tabs_images .tab-pane.fade{transition:opacity .15s linear;opacity:0}
  #tabs .tabs_images .tab-pane.fade.show{opacity:1}
}

/* ---- shared skin (identical across both source files) ---- */
#tabs.pe-tabs .tabs_ul li:hover {
  cursor: pointer;
}
#tabs.pe-tabs .tabs_ul .icon_wrap {
  width: 34px;
  height: 34px;
  border-radius: 100%;
  /* never shrink: long tab labels squeeze the circle into an oval otherwise */
  flex: 0 0 34px;
}
#tabs.pe-tabs .tabs_ul li {
  position: relative;
  z-index: 1;
  outline: none;
}
#tabs.pe-tabs .tabs_ul li i,
#tabs.pe-tabs .tabs_ul li a {
  color: var(--pe_old);
  text-decoration: none !important;
}
#tabs.pe-tabs .tabs_ul li a {
  border-left: 3px solid transparent;
}
#tabs.pe-tabs .tabs_ul li a:focus,
#tabs.pe-tabs .tabs_ul li a:focus-visible {
  outline: none;
}
#tabs.pe-tabs .tabs_ul li:hover a {
  border-color: var(--pe_blue);
  filter: none;
}
#tabs.pe-tabs .tabs_ul li.active a,
#tabs.pe-tabs .tabs_ul li a.active {
  background: var(--pe_light_bluegray);
  border-left-color: var(--pe_mid_blue);
}
#tabs.pe-tabs .tabs_ul li.active a span,
#tabs.pe-tabs .tabs_ul li a.active span {
  color: var(--pe_mid_blue);
  text-decoration: none;
}
#tabs.pe-tabs .tabs_ul li:hover a span,
#tabs.pe-tabs .tabs_ul li:focus a span {
  color: var(--pe_blue);
  text-decoration: none;
}
#tabs.pe-tabs .tabs_ul li:hover .icon_wrap {
  background: var(--pe_blue);
}
#tabs.pe-tabs .tabs_ul li.active .icon_wrap,
#tabs.pe-tabs .tabs_ul li a.active .icon_wrap {
  background: var(--pe_mid_blue);
}
/* image icons, BOTH variants: the skins below only styled the icon type each page
   happened to use, so an image icon on the single-set skin had no size cap (it
   overflowed the 34px circle) and no brightness filter (white assets went invisible
   on the white circle). Cap + invert here so any icon asset works on any page. */
#tabs.pe-tabs .tabs_ul .icon_wrap img {
  width: auto;
  height: auto;
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
  filter: brightness(0);
}
#tabs.pe-tabs .tabs_ul li.active .icon_wrap img,
#tabs.pe-tabs .tabs_ul li a.active .icon_wrap img,
#tabs.pe-tabs .tabs_ul li:hover .icon_wrap img,
#tabs.pe-tabs .tabs_ul li a:hover .icon_wrap img,
#tabs.pe-tabs .tabs_ul li a:focus .icon_wrap img {
  filter: brightness(1);
}
#tabs.pe-tabs .tabs_button {
  margin-top: 50px;
}
/* rail backdrop + card shadow: markup is identical in both variants, so these are
   shared rather than groups-only (the homepage single-set skin used to miss them) */
/* stretch the rail column so the backdrop can span the row exactly - the old
   height:150% was a guess off the LIST height and fell short (or overshot and
   relied on the row's overflow:hidden) whenever content length changed */
#tabs.pe-tabs .col.p-0.position-relative {
  align-self: stretch;
}
#tabs.pe-tabs .col.p-0.position-relative ul:before {
  content: "";
  background: var(--pe_white);
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
}
#tabs.pe-tabs .row.bg_pe_light_bluegray {
  box-shadow: var(--box_shadow);
}

/* ---- single-set variant (homepage skin: icomoon font icons) ---- */
#tabs.pe-tabs--single .tabs_ul li i {
  font-size: var(--fs-16);
  font-family: 'icomoon_homepage' !important;
}
#tabs.pe-tabs--single .tabs_ul li i.icon-sim,
#tabs.pe-tabs--single .tabs_ul li i.icon-shield-user1,
#tabs.pe-tabs--single .tabs_ul li i.icon-calendar,
#tabs.pe-tabs--single .tabs_ul li i.icon-pie-chart2,
#tabs.pe-tabs--single .tabs_ul li i.icon-checklist-colored1 {
  font-size: var(--fs-20);
}
#tabs.pe-tabs--single .tabs_ul li:hover i,
#tabs.pe-tabs--single .tabs_ul li.active i,
#tabs.pe-tabs--single .tabs_ul li a.active i {
  color: var(--pe_white);
}

/* ---- multi-group variant (pop skin: image icons + top-level nav) ---- */
#tabs.pe-tabs--groups .tabs_ul .icon_wrap img {
  filter: brightness(0);
}
#tabs.pe-tabs--groups .tabs_ul li a.active .icon_wrap img,
#tabs.pe-tabs--groups .tabs_ul li a:hover .icon_wrap img,
#tabs.pe-tabs--groups .tabs_ul li a:focus .icon_wrap img {
  filter: brightness(1);
}
#tabs.pe-tabs--groups #myTab li a {
  color: var(--pe_old);
  text-decoration: none;
}
#tabs.pe-tabs--groups #myTab li a:hover {
  color: var(--pe_blue);
  text-decoration: underline;
}
#tabs.pe-tabs--groups #myTab li a.active {
  color: var(--pe_mid_blue);
  text-decoration: underline;
}
#tabs.pe-tabs--groups .tab-pane.img_wrap p a:hover i {
  color: var(--pe_mid_blue);
}

/* ---- mobile: hide the rail, stack all panes (identical in both source files) ---- */
@media (max-width: 991.33px) {
  #tabs.pe-tabs .tabs_button {
    margin-top: 35px;
  }
  #tabs.pe-tabs .tabs_ul {
    display: none !important;
  }
  #tabs.pe-tabs .tabs_images {
    margin-top: 0;
  }
  #tabs.pe-tabs .tabs_images .img_wrap,
  #tabs.pe-tabs .tabs_images p {
    display: block;
    opacity: 1;
  }
  #tabs.pe-tabs .tabs_images .img_wrap {
    margin-bottom: 30px;
  }
  #tabs.pe-tabs .tabs_images .img_wrap:last-child {
    margin-bottom: 0;
  }
  /* homepage skin: drop the card background/shadow on mobile */
  #tabs.pe-tabs--single .row.bg_pe_light_bluegray {
    background: none;
    box-shadow: none;
  }
}