/* HUMANIA tab layout */

/* .humania-grid and .humania-card archived (unused) */

.humania-card b{
  display:inline-block;
  margin-top: 6px;
  color:#fff;
}

.humania-card a{
  display:inline-block;
}

@media (max-width: 520px){
  .humania-grid{
    grid-template-columns: 1fr;
  }
}

/* Ensure images inside HUMANIA tab content are centered */
.humania-tab-content img {
  display: block;
  margin: 0 auto;
}

/* HUMANIA tab buttons - mirror TBA tab styles */
.humania-tab-btn {
  flex: 1;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: #888;
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  transition: color 0.2s, border-color 0.2s, filter 0.2s;
  text-shadow: 0 0.2dvh calc((100dvh + 100dvw) / 600) rgba(0,0,0,1);
  filter: drop-shadow(0 0.2dvh calc((100dvh + 100dvw) / 600) rgb(0, 0, 0));
  text-decoration: none;
  display: block;
}
.humania-tab-btn:hover {
  color: #fff !important;
  filter: drop-shadow(0 0 calc((100dvh + 100dvw) / 600) rgba(137, 242, 88, 1));
}
.humania-tab-btn.humania-tab-active {
  color: #fff;
  height: calc(100dvh * 0.005);
  border-bottom-color: #89f258;
  filter: drop-shadow(0 0 calc((100dvh + 100dvw) / 600) rgba(137, 242, 88, 1));
}

/* Responsive centered logo + title layout for HUMANIA-Logo tab */
#HUMANIA-Logo {
  position: relative;
}
#HUMANIA-Logo .tba-content-box {
  display: flex;
  flex-direction: column;
}
#HUMANIA-Logo .tba-tabs {
  order: -1;
}
#HUMANIA-Logo .humania-tab-content {
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  justify-items: center;
  height: auto;
}
.humania-logo-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.humania-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-direction: column; /* force stacked images */
  max-width: 92%;
}
.humania-logo {
  width: clamp(70px, 18vmin, 420px);
  height: auto;
  display: block;
  filter: drop-shadow(0 calc((100dvh + 100dvw) / 500) calc((100dvh + 100dvw) / 400) rgba(0, 0, 0, 0.534));
  padding-top: 10vh;
}
.humania-title {
  width: clamp(70px, 26vmin, 600px);
  height: auto;
  display: block;
}
.humania-logo-text {
  color: #AAAAAA55;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  max-width: 95%;
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 20px; /* place above bottom nav area */
  margin: 0 auto 0 auto;
}

.humania-text { /* archived */ }

/* HUMANIA full-bleed page layout */
#HUMANIA-Logo .tba-content-box,
#HUMANIA-Model .tba-content-box,
#HUMANIA-WhitePaper .tba-content-box {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  height: 80%;
  min-height: auto;
  box-shadow: none;
  background: transparent;
}

#HUMANIA-Logo .tba-tabs,
#HUMANIA-Model .tba-tabs,
#HUMANIA-WhitePaper .tba-tabs {
  display: none !important;
  height: calc(5dvh);
}

#HUMANIA-Logo .humania-tab-content,
#HUMANIA-Model .humania-tab-content,
#HUMANIA-WhitePaper .humania-tab-content {
  padding-top: 12px;
}

body.humania-fixed-visible {
  scroll-padding-top: calc(100dvh * 0.05);
}

/* Hide the title image on very short screens */
@media (max-height: 399.98px) {
  .humania-title { display: none; }
}

/* Fixed HUMANIA tab bar (slides in/out when HUMANIA is active) */
.humania-tabs-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100dvh * 0.05);
  background: rgba(17, 17, 17, 0.95);
  transform: translateY(-120%);
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  z-index: 9999;
  padding: 0 8px;
  box-sizing: border-box;
  opacity: 0;
}
.humania-tabs-fixed.visible {
  transform: translateY(0);
/*  border-bottom: 2px solid rgba(0, 0, 0, 0.781); */
  opacity: 1;
}
.humania-tabs-fixed .humania-tab-btn {
  margin: 0 6px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: #888;
  line-height: normal;
  font-size: calc((100dvh + 100dvw) / 90);
  height: calc(100dvh * 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.humania-tabs-fixed .humania-tab-btn.humania-tab-active {
  color: #eee;
  border-bottom-color: #89f258;
}

@media (orientation: landscape) {
  .humania-tabs-fixed {
    height: calc(100dvh * 0.07);
  }
  .humania-tabs-fixed .humania-tab-btn {
    height: calc(100dvh * 0.07);
    font-size: calc((100dvh + 100dvw) / 95);
  }
}

/* Ensure icons/images inside the fixed HUMANIA tab buttons are centered */
.humania-tabs-fixed .humania-tab-btn > .nav-icon,
.humania-tabs-fixed .humania-tab-btn > .nav-icon-img,
.humania-tabs-fixed .humania-tab-btn > img {
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
}

/* When the fixed bar is visible, hide the in-section HUMANIA tab bars to avoid duplicate UI.
   IMPORTANT: scope to HUMANIA sections only so we don't collapse TBA's internal tabs. */
body.humania-fixed-visible #HUMANIA-Logo .tba-tabs,
body.humania-fixed-visible #HUMANIA-Model .tba-tabs,
body.humania-fixed-visible #HUMANIA-WhitePaper .tba-tabs {
  visibility: hidden;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* Add top padding to the main container when the fixed bar is present to avoid covering content on very small screens */
body.humania-fixed-visible .app-container {
  padding-top: calc(100dvh * 0.05);
}

@media (orientation: landscape) {
  body.humania-fixed-visible .app-container {
    padding-top: calc(100dvh * 0.07);
  }
}
