@charset "UTF-8";

/* ============================================================
   hgai.css — scoped styles for /resources/human/hgai/
   Loaded only on layout: hgai pages.

   Patch notes (migration to layout: hgai):
   - .row  renamed to #hgai-footer .row to avoid clobbering
     Bootstrap's .row grid class.
   - #containermain: float removed, width set to 100% so it
     fills the page under the FaceBase navbar.
   - #hgai-footer: float removed, width set to 100%.
   - #content: fixed 900px width → max-width + width:100%
     for responsiveness.
   - #hgai-wrap: clearfix so floated children don't collapse.
   ============================================================ */

/* Full-width wrapper — must be explicit or it shrink-wraps to #content's max-width */
#hgai-wrap {
  width: 100%;
  overflow-x: hidden; /* prevent horizontal scroll from any overflow */
}

/* Clearfix so floated children don't collapse the wrapper */
#hgai-wrap::after {
  content: "";
  display: table;
  clear: both;
}

p { font-size: 16px; }
p.center {
  text-align: center;
}

.sublist h3 {
  font-size: 18px;
  font-style: italic;
}

#containermain h1, #containermain h2 {
  text-align: center;
}

/* ── HGAI sub-navigation bar ─────────────────────────────────────────────
   Pure-CSS nav modelled on uh3_nav.html.
   Uses :hover + :focus-within on the .hgai-nav-dropdown wrapper div so the
   menu stays open as the mouse moves from the trigger into the submenu.
   All class names are scoped with hgai-nav-* / hgai-submenu-* to avoid
   any conflict with Bootstrap, main.css, or other subsites.
   ─────────────────────────────────────────────────────────────────────── */

#header {
  padding: 0.5em 1em;
  background-color: #000;
}

/* ── Nav bar ── */
.hgai-nav {
  background: #000;
}

.hgai-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.hgai-nav-item {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

/* All top-level links and the Projects trigger */
.hgai-nav-link {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  color: #E2DEDE;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  border: none;
  user-select: none;
}
.hgai-nav-link:hover,
.hgai-nav-link:focus {
  color: #6DD0FF;
  text-decoration: none;
  outline: none;
}
.hgai-nav-home {
  color: #6DD0FF;
}
.hgai-nav-home:hover {
  color: #ffffff;
}

/* ── Dropdown wrapper — :hover + :focus-within keeps menu open ── */
.hgai-nav-dropdown {
  position: relative;
}

/* Level-2 submenu (Projects → categories) */
.hgai-submenu-l2 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #000;
  z-index: 500;
}
.hgai-nav-dropdown:hover .hgai-submenu-l2,
.hgai-nav-dropdown:focus-within .hgai-submenu-l2 {
  display: block;
}

/* Level-3 submenu (category → individual studies) — flies right */
.hgai-submenu-l3 {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 280px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #000;
  z-index: 600;
}
.hgai-nav-dropdown-l3:hover .hgai-submenu-l3,
.hgai-nav-dropdown-l3:focus-within .hgai-submenu-l3 {
  display: block;
}

/* ── Submenu items ── */
.hgai-submenu-item {
  display: block;
  margin: 0;
  padding: 0;
}

/* The .hgai-nav-dropdown-l3 wrapper needs to fill the full width of its
   parent <li> so the hover area covers the entire row, not just the text */
.hgai-submenu-item .hgai-nav-dropdown-l3 {
  display: block;
  width: 100%;
}

.hgai-submenu-link {
  display: block;
  padding: 8px 14px;
  font-size: 16px;
  color: #E2DEDE;
  text-decoration: none;
  white-space: normal;
  line-height: 1.3;
}
.hgai-submenu-link:hover,
.hgai-submenu-link:focus {
  color: #6DD0FF;
  background: #111;
  text-decoration: none;
  outline: none;
}

/* Category links that have a sub-flyout get a right-caret */
.hgai-has-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Caret icons */
.hgai-nav-toggle .fa-caret-down {
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.8;
}
.hgai-has-sub .fa-caret-right {
  font-size: 12px;
  opacity: 0.8;
  flex-shrink: 0;
}

/* ── Main content layout ─────────────────────────────────── */
/* PATCHED: removed float:left so #containermain fills the page */
#containermain {
  background: #ffffff;
  width: 100%;
  overflow: hidden; /* clearfix — ensures #containermain wraps any internal floats */
}

#left {
  background: #ffffff;
  width: 150px;
  float: left;
}

/* PATCHED: fixed width → responsive max-width */
#content {
  margin: 10px auto;
  max-width: 900px;
  width: 100%;
  background: #ffffff;
  text-align: left;
  font-size: 18px;
  vertical-align: top;
}

.maintable {
  border: 2em red;
}

table, th, td {
  border: 1em;
  border-collapse: collapse;
}

th, td {
  padding: 2px 0;
}

#centertab {
  text-align: center;
}

/* ── Tab UI ──────────────────────────────────────────────── */
.tabs {
  list-style: none;
  margin: 50px auto 0;
  font-size: 16px;
  text-align: center;
  word-wrap: normal;
}

.tabs li {
  float: left;
  position: relative;
}

.tabs a:hover {
  color: #ffffff;
}
.tabs a {
  float: left;
  padding: 10px 25px;
  text-decoration: none;
  height: 60px;
  width: 160px;
  color: black;
  background: #6dd0ff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.tabs .active {
  z-index: 3;
}
.tabs .active a {
  background: white;
  color: #6DD0FF;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  outline: none;
}
.tabs li:before, .tabs li:after,
.tabs li a:before, .tabs li a:after {
  position: absolute;
  bottom: 0;
}
.tabs li:last-child:after,   .tabs li:last-child a:after,
.tabs li:first-child:before, .tabs li:first-child a:before,
.tabs .active:after,   .tabs .active:before,
.tabs .active a:after, .tabs .active a:before {
  content: "";
}
.tabs .active:before, .tabs .active:after {
  background: white;
}
.tabs li:before {
  left: -10px;
}
.tabs li:after {
  right: -10px;
}
.tabs .active a:after, .tabs .active a:before {
  background: #6DD0FF;
}
.tabs li:first-child.select a:before,
.tabs li:last-child.select a:after {
  background: #FFFFFF;
}
.tabs li a:before {
  left: -20px;
}
.tabs li a:after {
  right: -20px;
}

.group:before, .group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
}

#tab01, #tab02, #tab03, #tab04, #tab05 {
  margin-left: 40px;
}

div#dataform {
  padding-top: 20px;
  overflow: hidden; /* clearfix — contains the float:left and float:right fieldset columns */
}

div#dataform legend {
  font-size: 18px;
  width: 90%;
}

div#dataform input[type=radio] {
  margin-right: 10px;
}

#right {
  background: #ffffff;
  width: 150px;
  float: left;
}

/* ── HGAI footer ─────────────────────────────────────────── */
#hgai-footer {
  clear: both;             /* always start below any floated form columns */
  padding: 10px 1em 1em 1em;
  min-height: 120px;
  width: 100vw;            /* viewport width — escapes any parent max-width */
  position: relative;
  background: #000000;
  font-size: 14px;
  color: #6DD0FF;
  text-align: center;
  box-sizing: border-box;
}

#hgai-footer a {
  color: #6DD0FF;
  text-decoration: none;
}

#hgai-footer a:hover {
  color: #ffffff;
}

/* PATCHED: scoped to #hgai-footer and converted from float columns
   to flexbox so the three columns spread correctly at any width.
   Also cancels Bootstrap 3's .row negative margins which would
   otherwise indent the content left. */
#hgai-footer .row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  margin-left: 0;  /* cancel Bootstrap 3 .row { margin-left: -15px } */
  margin-right: 0; /* cancel Bootstrap 3 .row { margin-right: -15px } */
}

.column {
  flex: 1 1 200px;
  max-width: 380px;
  min-height: 110px;
  padding: 10px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column-center {
  flex: 1 1 200px;
  max-width: 410px;
  min-height: 110px;
  padding: 10px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Utility ─────────────────────────────────────────────── */
.hidden {
  display: none;
}
.result {
  margin: 1em;
}

.result img {
  max-width: 100%;
}

li.header {
  display: inline;
  border-style: groove;
  float: left;
  width: 100px;
  text-align: center;
}

/* ── Submit / reset buttons ──────────────────────────────── */
#OFC1-submit, #OFC1-reset,
#OFC2-submit, #OFC2-reset,
#OFC3-submit, #OFC3-reset,
#OFC4-submit, #OFC4-reset,
#OFC5-submit, #OFC5-reset,
#DENT1-submit, #DENT1-reset,
#DENT2-submit, #DENT2-reset,
#DENT3-submit, #DENT3-reset,
#FV1-submit,   #FV1-reset {
  width: 5em;
  height: 3em;
  background-color: #6DD0FF;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

#locus-zoom {
  display: none;
}