/* =========================================================
   Hero Frequencies – site-wide styles
   ========================================================= */

/* Mandala watermark – visible on every page behind content   */
.page-watermark {
  position: fixed;
  inset: 0;
  background: url('/images/MandalaFlattened.svg')
    calc(50% + 125px) 50% / min(68vh, 68vw) no-repeat;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}

/* On smaller screens the sidebar collapses – center the mandala */
@media (max-width: 1199.98px) {
  .page-watermark {
    background-position: 50% 50%;
  }
}

/* Ensure page content renders above the watermark layer */
.main-content > .container-fluid,
.main-content > .container {
  position: relative;
  z-index: 1;
}

/* Breadcrumb / hamburger bar — sticky above scrolling cards (do not set position:relative here) */
.main-content > nav.navbar-main {
  position: sticky;
  z-index: 1020;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* Keep the top bar (and mobile hamburger) visible below Bootstrap's lg collapse breakpoint.
   Without this, #iconNavbarSidenav inside .navbar-collapse is display:none on phones. */
@media (max-width: 991.98px) {
  .navbar-main.navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
  }
}

/* Sidenav build info pinned to bottom */
#sidenav-main {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 1rem);
}
#sidenav-main #sidenav-collapse-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidenav-build-info {
  flex-shrink: 0;
  margin-top: auto;
  padding: 0.65rem 1.25rem 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.sidenav-build-info .build-line {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #7b809a;
}

/* Sticky COM-port gate under sidenav brand */
#sidenav-main .sidenav-com-gate {
  margin-top: -0.25rem;
}
#sidenav-main .sidenav-com-btn {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #344767;
  box-shadow: none;
}
#sidenav-main .sidenav-com-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
}
#sidenav-main .sidenav-com-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
#sidenav-main .sidenav-com-btn--released {
  border-color: rgba(46, 125, 50, 0.45);
  color: #1b5e20;
  background: rgba(46, 125, 50, 0.08);
}

/* Hamburger is always available so the sidenav can collapse on every page */
body.collapsible-sidenav .navbar-main .sidenav-toggler,
body.scan-page .navbar-main .sidenav-toggler {
  display: block !important;
}
body.collapsible-sidenav .navbar-main:has(.sidenav-toggler) li:has(#iconNavbarSidenav),
body.scan-page .navbar-main:has(.sidenav-toggler) li:has(#iconNavbarSidenav) {
  display: none !important;
}

/* Collapsible sidenav: hide when collapsed; scan-sidenav-open is the source of truth */
body.scan-page:not(.scan-sidenav-open) #sidenav-main,
body.collapsible-sidenav:not(.scan-sidenav-open) #sidenav-main {
  transform: translateX(calc(-100% - 1rem)) !important;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

body.scan-page:not(.scan-sidenav-open) .sidenav.fixed-start + .main-content,
body.collapsible-sidenav:not(.scan-sidenav-open) .sidenav.fixed-start + .main-content {
  margin-left: 0 !important;
}

body.scan-page.scan-sidenav-open #sidenav-main,
body.collapsible-sidenav.scan-sidenav-open #sidenav-main {
  transform: translateX(0) !important;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  z-index: 10050;
}

.scan-sidenav-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10040;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(52, 71, 103, 0.4);
  cursor: pointer;
}

.scan-sidenav-backdrop[hidden] {
  display: none !important;
}

@media (min-width: 1200px) {
  .scan-sidenav-backdrop {
    display: none !important;
  }

  body.scan-page:not(.scan-sidenav-open) #sidenav-main,
  body.collapsible-sidenav:not(.scan-sidenav-open) #sidenav-main {
    max-width: 15.5rem !important;
  }

  body.scan-page.scan-sidenav-open #sidenav-main,
  body.collapsible-sidenav.scan-sidenav-open #sidenav-main {
    max-width: 14rem !important;
  }

  body.scan-page.scan-sidenav-open .sidenav.fixed-start + .main-content,
  body.collapsible-sidenav.scan-sidenav-open .sidenav.fixed-start + .main-content {
    margin-left: 15rem !important;
  }
}

/* Center watermark when collapsible sidenav is collapsed */
body.scan-page:not(.scan-sidenav-open) .page-watermark,
body.collapsible-sidenav:not(.scan-sidenav-open) .page-watermark {
  background-position: 50% 50%;
}

/* Bootstrap modals must stack above the sidebar (open sidenav is 10050) */
.modal-backdrop { z-index: 10100 !important; }
.modal         { z-index: 10105 !important; }