/* Helium22 Corporate CMS Theme */
:root{
  --h22-primary: #0B5ED7;
  --h22-media-radius: 14px;
  --h22-radius: 6px;
  --h22-nav-bg: #ffffff;
  --h22-nav-text: #111827;
  --h22-nav-active-bar-color: #0B5ED7;
  --h22-nav-active-bar-height: 100%;
  --h22-nav-active-bar-opacity: .12;
  --h22-nav-active-bar-display: block;
  --h22-nav-active-border-size: 0px;
  --h22-nav-active-border-color: #0B5ED7;
  --h22-submenu-bg: #ffffff;
  --h22-submenu-text: #111827;
  --h22-submenu-hover-bg: rgba(11,94,215,.10);
  --h22-submenu-accent: #0B5ED7;
  --h22-submenu-accent-width: 4px;
  --h22-submenu-outer-padding: 0px;
  --h22-submenu-radius: 10px;
  --h22-submenu-font-size: .95rem;
  --h22-submenu-row-padding-y: .36rem;
  --h22-submenu-row-padding-x: .70rem;
  --h22-submenu-line-height: 1.1;
  --h22-nav-toggler-invert: 0;
  --h22-nav-toggler-border: rgba(17,24,39,.18);
}

html, body { height: 100%; }
body{
  font-family: var(--h22-font);
  background: #f6f8fc;
  color: #111827;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.h22-logo{
  height: 34px;
  width: auto;
}

.h22-main{ flex: 1 0 auto; }

.h22-topbar .navbar{
  background: var(--h22-nav-bg) !important;
  border-radius: 0;
  box-shadow: var(--h22-nav-bottom-shadow, none);
}
.h22-topbar .navbar .navbar-brand,
.h22-topbar .navbar .navbar-brand span{
  color: var(--h22-nav-text) !important;
}
.h22-topbar .navbar-toggler{
  border-color: var(--h22-nav-toggler-border);
}
.h22-topbar .navbar-toggler-icon{
  filter: invert(var(--h22-nav-toggler-invert));
}

.h22-topbar .nav-link{
  font-family: var(--h22-nav-font-family, var(--h22-font));
  font-size: var(--h22-nav-font-size, 1rem);
  font-weight: 700;
  color: var(--h22-nav-text);
  padding: .65rem .75rem;
  border-radius: 0;
}
.h22-topbar .nav-link:hover{
  background: rgba(11,94,215,.08);
  color: var(--h22-nav-text);
}


.h22-topbar .nav-link{
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.h22-topbar .nav-link::after{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:0;
  display: var(--h22-nav-active-bar-display);
  height: var(--h22-nav-active-bar-height);
  background: var(--h22-nav-active-bar-color);
  opacity: var(--h22-nav-active-bar-opacity);
  transform: translateY(110%);
  transition: transform .14s ease-in-out;
  z-index: 0;
}
.h22-topbar .nav-link.active::after{
  transform: translateY(0);
}

/* Optional active border (default off) */
.h22-topbar .nav-link.active::before{
  content:"";
  position:absolute;
  inset:0;
  box-shadow: inset 0 0 0 var(--h22-nav-active-border-size) var(--h22-nav-active-border-color);
  pointer-events:none;
  z-index:0;
}
.h22-topbar .nav-link span,
.h22-topbar .nav-link{
  position: relative;
  z-index: 1;
}
.h22-topbar .nav-link:focus,
.h22-topbar .nav-link:focus-visible{
  outline: none;
  box-shadow: none;
}

.h22-nav-date{
  font-family: var(--h22-nav-font-family, var(--h22-font));
  font-size: calc(var(--h22-nav-font-size, 1rem) * .85);
  font-weight: 400;
  color: var(--h22-nav-text);
  opacity: .88;
  padding: .35rem .25rem;
  white-space: nowrap;
}
@media (max-width: 991.98px){
  .h22-nav-date{ padding: .25rem .75rem; }
}

/* Admin sidebar */
.h22-admin-sidebar{
  scrollbar-width: thin;
}
.h22-admin-sidebar .nav-link{
  font-size: .875rem;
  padding: .45rem .65rem;
  border-radius: 6px;
  color: #374151;
  white-space: nowrap;
}
.h22-admin-sidebar .nav-link:hover{
  background: rgba(11,94,215,.06);
  color: #111827;
}
.h22-admin-sidebar .nav-link.active{
  background: var(--h22-primary, #0B5ED7);
  color: #fff;
}
.h22-admin-signedin{
  font-size: .78rem;
  line-height: 1.15;
  word-break: break-word;
}


.dropdown-menu{
  background: var(--h22-submenu-bg);
  background-image: var(--h22-submenu-bg-image, none);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #4b5563;
  border-radius: var(--h22-submenu-radius);
  padding: var(--h22-submenu-outer-padding);
  box-shadow: var(--h22-submenu-shadow-x) var(--h22-submenu-shadow-y) var(--h22-submenu-shadow-blur) var(--h22-submenu-shadow-spread) var(--h22-submenu-shadow-color);
}
.dropdown-item{
  border-radius: 0;
  padding: var(--h22-submenu-row-padding-y) var(--h22-submenu-row-padding-x);
  white-space: nowrap;
  font-family: var(--h22-submenu-font-family, var(--h22-font));
  font-weight: 400;
  line-height: var(--h22-submenu-line-height);
  font-size: var(--h22-submenu-font-size);
  color: var(--h22-submenu-text);
}
.dropdown-item b,
.dropdown-item strong{
  font-weight: 700;
}
.dropdown-item:hover{
  background: var(--h22-submenu-hover-bg);
  color: var(--h22-submenu-text);
  box-shadow: inset var(--h22-submenu-accent-width) 0 0 var(--h22-submenu-accent);
}

/* Non-selectable submenu rows */
.dropdown-menu .h22-menu-header{
  padding: .30rem var(--h22-submenu-row-padding-x);
  font-family: var(--h22-submenu-font-family, var(--h22-font));
  font-size: calc(var(--h22-submenu-font-size) * 0.85);
  font-weight: 500;
  color: rgba(17,24,39,.55);
  cursor: default;
  user-select: none;
}
.dropdown-menu .h22-menu-divider{
  margin: .35rem 0;
  border-top-color: rgba(17,24,39,.10);
}

/* Multi-level dropdown support */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu{
  top: 0;
  left: 100%;
  margin-left: .25rem;
  display: none;
}
.dropdown-submenu.h22-open-left > .dropdown-menu{
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: .25rem;
}
.dropdown-submenu:hover > .dropdown-menu{ display: block; }

.h22-h1{ font-size: clamp(1.45rem, 1.1vw + 0.95rem, 2.0rem); font-weight: 300; letter-spacing: -0.01em; }
.h22-h2{ font-size: clamp(1.35rem, 1.0vw + 1rem, 1.9rem); font-weight: 500; letter-spacing: -0.01em; }
.h22-h3{ font-size: 1.15rem; font-weight: 500; letter-spacing: -0.005em; }
.h22-h4{ font-size: 1.0rem; font-weight: 500; }

.h22-lead{
  font-size: 1.05rem;
  color: #4b5563;
  line-height: 1.6;
  margin-top: .5rem;
}

.h22-content{
  font-size: 1rem;
  line-height: 1.7;
}
.h22-content::after{ content:""; display:block; clear:both; }
.h22-content h2{ font-size: 1.4rem; margin-top: 1.25rem; }
.h22-content h3{ font-size: 1.15rem; margin-top: 1.1rem; }

.btn-primary{
  background: var(--h22-primary);
  border-color: var(--h22-primary);
}
.btn-outline-primary{
  border-color: rgba(11,94,215,.4);
  color: var(--h22-primary);
}
.btn-outline-primary:hover{
  background: rgba(11,94,215,.08);
  border-color: var(--h22-primary);
  color: var(--h22-primary);
}

/* Media style (configurable defaults via admin) */
.h22-media{
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}
.h22-rounded{ border-radius: calc(var(--h22-radius) + 10px); }
.h22-media.h22-rounded{ border-radius: var(--h22-media-radius); }
.h22-shape-none{ border-radius: 0 !important; }
.h22-media.h22-shape-none{ border-radius: 0 !important; }
.h22-circle{ border-radius: 9999px; }

/* Token image embeds: {img:ref|...} */
.h22-token-img{
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}
.h22-token-img.border{ border-color: rgba(17,24,39,.12)!important; }

/* Token download links: {download:...} */
.h22-token-download{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: underline;
}
.h22-token-download:hover{ text-decoration: none; }

/* Floated token embeds: {img:...|float=left} and {video:...|float=right} */
.h22-float-media{
  max-width: 100%;
  margin: .25rem 0 1rem 0;
}
.h22-float-left{
  float: left;
  margin-right: 1rem;
}
.h22-float-right{
  float: right;
  margin-left: 1rem;
}

.h22-token-video,
.h22-token-video-iframe{
  max-width: 100%;
  border: 0;
  border-radius: var(--h22-media-radius);
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

@media (max-width: 576px){
  .h22-float-left,
  .h22-float-right{ float: none; margin-left: 0; margin-right: 0; }
}

/* Footer */
.h22-footer{
  background: var(--h22-footer);
  color: rgba(255,255,255,.85);
}
.h22-footer .text-muted{ color: rgba(255,255,255,.75)!important; }

/* Popup video link inserted by the WYSIWYG editor */
.h22-popup-video{ text-decoration: none; color: inherit; }
.h22-popup-video:hover{ text-decoration: none; }

@media (max-width: 991.98px){
  .dropdown-submenu > .dropdown-menu{
    left: 0;
    margin-left: 0;
    margin-top: .25rem;
  }
  .dropdown-submenu:hover > .dropdown-menu{ display: none; } /* avoid hover-only on touch */
  .dropdown-submenu > a::after{ content: ' (tap)'; font-size: .8em; color: #6b7280; }
}

.rounded-4{ border-radius: var(--h22-radius)!important; }
.rounded-5{ border-radius: calc(var(--h22-radius) + 4px)!important; }

/* Admin menu drag/drop */
.h22-menu-list{ margin: 0; padding-left: 0; }
.h22-menu-list > li.list-group-item{ border-radius: var(--h22-radius); }


/* Legal content preview boxes */
.h22-legal-box{max-height:220px;overflow:auto;border:1px solid rgba(17,24,39,.10);border-radius: var(--h22-radius);padding: .75rem;background:#fff;}


/* Submenu item icon */
.dropdown-menu .dropdown-item .h22-submenu-icon{
  width: var(--h22-submenu-icon-size, 1.15em);
  height: var(--h22-submenu-icon-size, 1.15em);
  object-fit: contain;
  flex: 0 0 auto;
  margin-right: .55rem;
  display: inline-block;
  vertical-align: middle;
}
.dropdown-menu .dropdown-item .h22-submenu-label{
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

/* If ANY row in a submenu has an icon, reserve icon space for ALL rows to keep text aligned */
.dropdown-menu.h22-has-icons .dropdown-item{
  position: relative;
  padding-left: calc(var(--h22-submenu-row-padding-x) + var(--h22-submenu-icon-size, 1.15em) + .55rem);
}
.dropdown-menu.h22-has-icons .dropdown-item .h22-submenu-icon{
  position: absolute;
  left: var(--h22-submenu-row-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;
}
.dropdown-menu.h22-has-icons .dropdown-item .h22-submenu-label{
  display: block;
}

/* Social icons (header + footer) */
.h22-social-wrap{ white-space: nowrap; }
.h22-social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--h22-nav-text);
  opacity: .88;
}
.h22-social-link:hover{ opacity: 1; background: rgba(17,24,39,.06); }
.h22-footer .h22-social-link{ color: rgba(255,255,255,.92); }
.h22-footer .h22-social-link:hover{ background: rgba(255,255,255,.08); }
/* Topbar auth icon buttons */
.h22-nav-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  text-decoration:none;
  color: var(--h22-nav-text);
  border: 1px solid rgba(17,24,39,.18);
  background: transparent;
}
.h22-nav-icon-btn:hover{ background: rgba(17,24,39,.06); }
.h22-nav-icon-btn i{ font-size: 1.05rem; line-height:1; }
.h22-nav-icon-btn.h22-nav-icon-danger{ color:#b00020; border-color: rgba(176,0,32,.25); }
.h22-nav-icon-btn.h22-nav-icon-danger:hover{ background: rgba(176,0,32,.06); }


.h22-nav-date{white-space:nowrap; font-weight:400;}

/* Block edit modal: keep footer actions visible (esp. with WYSIWYG in a scrollable modal) */
#blockEditModal .modal-footer{
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 5;
}

/* Cookie consent */
.h22-cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1070;
  padding: .75rem;
}
.h22-cookie-banner .alert{
  margin: 0;
  border-radius: 0;
  box-shadow: 0 8px 20px rgba(17,24,39,.18);
}

/* Scroll helper: 3 tiny dots (top/middle/bottom) */
.h22-scroll-dots{
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1060;
  display: none;
}
.h22-scroll-dots .h22-dot-wrap{
  width: 34px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  background: rgba(17,24,39,.10);
  backdrop-filter: blur(6px);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.h22-scroll-dots button{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.92);
  padding: 0;
  opacity: .85;
}
.h22-scroll-dots button:hover{ opacity: 1; }


/* Scroll dots: circle around dot + active dot black */
.h22-scroll-dots button{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.92);
  background: transparent;
  position: relative;
  padding: 0;
}
.h22-scroll-dots button::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:4px;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  transform: translate(-50%, -50%);
}
.h22-scroll-dots button.active::after{
  background: #000;
}


/* Page Control (media section above body) */
.h22-page-control{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.h22-pc-media{
  position: absolute;
  object-fit: cover;
  max-width: none;
  border-radius: var(--h22-media-radius, 18px);
  opacity: 0;
  animation-duration: var(--h22-pc-dur, .8s);
  animation-fill-mode: both;
  will-change: transform, opacity, filter;
}
.h22-pc-title{
  position: absolute;
  max-width: min(720px, calc(100% - 48px));
  padding: 18px 20px;
  border-radius: 18px;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
}

.h22-pc-title.h22-pc-title-nobg{
  background: transparent;
  border: 0;
  padding: 0;
  backdrop-filter: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.h22-pc-title.h22-pc-title-nobg h1{ color: #fff; }
.h22-pc-title.h22-pc-title-nobg .text-muted{
  color: rgba(255,255,255,.85) !important;
}
@keyframes h22FadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes h22SlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes h22ZoomIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes h22BlurIn { from { opacity: 0; filter: blur(10px); transform: scale(.99); } to { opacity: 1; filter: blur(0); transform: scale(1); } }

.h22-pc-effect-fade{ animation-name: h22FadeIn; }
.h22-pc-effect-slide-up{ animation-name: h22SlideUp; }
.h22-pc-effect-zoom{ animation-name: h22ZoomIn; }
.h22-pc-effect-blur{ animation-name: h22BlurIn; }

/* Responsive: social icons wrap under nav when width is tight */
@media (max-width: 991.98px){
  header .navbar .container{
    flex-wrap: wrap;
  }
  header .navbar .container > .d-flex.align-items-center.gap-3.ms-auto{
    width: 100%;
    justify-content: flex-start;
    margin-top: .5rem;
  }
  .h22-social-wrap{
    flex-wrap: wrap;
  }
}


/* Maintenance notice splash (home) */
.h22-notice-backdrop{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  padding: 16px;
}
.h22-notice-modal{
  width: min(640px, calc(100% - 32px));
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 18px 70px rgba(0,0,0,0.35);
}
.h22-notice-body{ margin: 0; }
.h22-modal-open{ overflow: hidden !important; }

/* Hover video marker (inserted via AmyEditor) */
.h22-hover-video{
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}



/* --- AmyEditor content helpers (tables, hover effects, collapsible) --- */
.h22-table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.98rem;
}
.h22-table th,
.h22-table td{
  border: 1px solid rgba(17,24,39,.12);
  padding: .55rem .65rem;
  vertical-align: top;
}
.h22-table thead th{
  background: #f8fafc;
  font-weight: 700;
}
.h22-hr{ opacity: .95; }

.h22-collapse{
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 14px;
  padding: .55rem .75rem;
  margin: 1rem 0;
  background: #fff;
}
.h22-collapse > summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.h22-collapse > summary::-webkit-details-marker{ display: none; }
.h22-collapse-body{ padding: .5rem .15rem .1rem .15rem; }

.h22-hoverpop{
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

.h22-audiohover{
  text-decoration: underline wavy;
  text-underline-offset: 3px;
  cursor: pointer;
}


.h22-token-audio{
  width: 100%;
  max-width: 100%;
  display: block;
}