/* ==========================================================================
   ICLPSM — Navigation & page-utility enhancements
   Loaded last so it wins over iclm-design.css / responsive-fixes.css.

   1. Top tier   — lifted off the white so the two tiers read as separate
   2. Main tier  — primary navigation centred (desktop only)
   3. Page tools — floating "back to home" / "back to top" controls
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOP TIER
   Both tiers were white, so the header read as one flat slab. A tinted
   surface plus a thin brand rule gives the top tier presence without
   turning it into a coloured banner.
   -------------------------------------------------------------------------- */

.bcs-header-2tier::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--primary-main, #e74c3c);
}

.bcs-top-tier {
  background: #eaeff6;
  border-bottom: 1px solid #d4dce7;
  /* Soft inner edge so the white main tier reads as sitting on top of it. */
  box-shadow: inset 0 -6px 10px -8px rgba(26, 37, 47, 0.28);
}

.bcs-top-links a {
  color: #2f3944;
  font-weight: 600;
  letter-spacing: 0.1px;
}

/* The top row was left-anchored (pinned after the logo) while the main row is
   centred, so the two only lined up at one viewport width. Centring the top
   row keeps both in step: being the wider of the two, it now brackets the
   main row evenly on both ends instead of hanging off to the left. */
@media (min-width: 992px) {
  .bcs-top-links {
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 2rem;
    row-gap: 4px;
    /* The links sit in the middle Bootstrap column, whose centre is 8.5px
       right of the container's true centre (the logo column is 17px wider
       than the login column). The offset is constant at every viewport, so
       17px of right padding pulls the centred row back onto the main tier's
       axis and makes the overhang equal at both ends. */
    padding-right: 17px;
  }
}

.bcs-top-links a:hover,
.bcs-top-links a:focus {
  color: var(--primary-main, #e74c3c);
}

/* The main tier stays white, so the tint above it reads as the raised edge. */
.bcs-main-tier {
  background: #ffffff;
}


/* --------------------------------------------------------------------------
   2. MAIN TIER — centred navigation
   Desktop only: below 992px the collapse stacks vertically and centring
   would fight the mobile drawer.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .bcs-main-tier .navbar {
    position: relative;
  }

  .bcs-main-tier .navbar-nav {
    justify-content: center;
  }

  /* `ml-lg-auto` on the search item absorbs all free space, which would push
     the links off-centre. Pin it to the right edge instead. */
  .bcs-main-tier .navbar-nav > .nav-item.ml-lg-auto {
    margin-left: 0 !important;
    position: absolute;
    right: 0;
    top: 0;
  }

  .bcs-main-tier .navbar-nav > .nav-item.ml-lg-auto .bcs-search-link {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 0.5rem;
  }

  /* Dropdowns hang from the centred item rather than the viewport edge. */
  .bcs-main-tier .navbar-nav > .nav-item.dropdown {
    position: relative;
  }
}


/* --------------------------------------------------------------------------
   3. PAGE TOOLS — back to home / back to top
   Injected by js/iclm-nav-enhancements.js on every page.
   -------------------------------------------------------------------------- */

.iclm-page-tools {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040; /* above the sticky header (1000), below modals (1050) */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.iclm-page-tool {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, background-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.iclm-page-tool svg {
  width: 20px;
  height: 20px;
  display: block;
}

.iclm-page-tool:hover,
.iclm-page-tool:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  text-decoration: none;
}

.iclm-page-tool:focus-visible {
  outline: 3px solid #1a252f;
  outline-offset: 3px;
}

/* Home — primary action */
.iclm-page-tool--home {
  background: var(--primary-main, #e74c3c);
  color: #ffffff;
}

.iclm-page-tool--home:hover,
.iclm-page-tool--home:focus {
  background: #c0392b;
  color: #ffffff;
}

/* Top — secondary action */
.iclm-page-tool--top {
  background: #ffffff;
  color: #1a252f;
  border-color: #c3ccd6;
}

.iclm-page-tool--top:hover,
.iclm-page-tool--top:focus {
  background: #1a252f;
  color: #ffffff;
  border-color: #1a252f;
}

/* Back-to-top only appears once there is somewhere to go back to. */
.iclm-page-tool--top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
}

.iclm-page-tools.is-scrolled .iclm-page-tool--top {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Re-assert the hover lift — the .is-scrolled rule above outranks :hover. */
.iclm-page-tools.is-scrolled .iclm-page-tool--top:hover,
.iclm-page-tools.is-scrolled .iclm-page-tool--top:focus {
  transform: translateY(-3px);
}

@media (max-width: 767.98px) {
  .iclm-page-tools {
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }

  .iclm-page-tool {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iclm-page-tool {
    transition: opacity 0.2s ease;
  }

  .iclm-page-tool:hover,
  .iclm-page-tool:focus,
  .iclm-page-tools.is-scrolled .iclm-page-tool--top:hover,
  .iclm-page-tools.is-scrolled .iclm-page-tool--top:focus {
    transform: none;
  }
}

@media print {
  .iclm-page-tools {
    display: none;
  }
}