/* =====================================
   GLOBAL FLOAT CLEAR FIX (CRITICAL)
   ===================================== */

.row-fluid::before,
.row-fluid::after {
    display: table;
    content: "";
    line-height: 0;
}

.row-fluid::after {
    clear: both;
}

/* ========== Base spacing ========== */
body {
  padding-top: 15px;
  padding-bottom: 0px;
}

/* ========== Container ========== */
.container {
  margin: 0 auto;
  max-width: 1000px;
}
.container > hr {
  margin: 20px 0;
}

/* ========== Navbar ========== */
.navbar .navbar-inner { padding: 0; }
.navbar .nav {
  margin: 0;
  display: table;
  width: 100%;
}
.navbar .nav li {
  display: table-cell;
  width: 1%;
  float: none;
}
.navbar .nav li a {
  font-weight: bold;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,.75);
  border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
  border-left: 0;
  border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
  border-right: 0;
  border-radius: 0 3px 3px 0;
}
body > .navbar { font-size: 13px; }

/* Brand */
body > .navbar .brand {
  padding-right: 0;
  padding-left: 0;
  margin-left: 20px;
  float: right;
  font-weight: bold;
  color: #000;
  text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  transition: all .2s linear;
}
body > .navbar .brand:hover {
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
}

/* ========== Sidebar (Docs) ========== */
@media screen and (max-width: 768px) {
  .bs-docs-sidenav { display: none !important; }
}
.bs-docs-sidenav {
  width: 228px;
  margin: 30px 0 0;
  padding: 0;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
  display: block;
  width: 200px;
  margin: 0 0 -1px;
  padding: 8px 14px;
  border: 1px solid #e5e5e5;
}
.bs-docs-sidenav > li > a.subhead {
  display: block;
  width: 168px;
  margin: 0 0 -1px;
  padding: 8px 30px;
  border: 1px solid #e5e5e5;
  font-size: 12px;
}
.bs-docs-sidenav > li:first-child > a { border-radius: 6px 6px 0 0; }
.bs-docs-sidenav > li:last-child  > a { border-radius: 0 0 6px 6px; }
.bs-docs-sidenav > .active > a {
  position: relative;
  z-index: 2;
  padding: 9px 15px;
  border: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
.bs-docs-sidenav > li > a:hover { background-color: #f5f5f5; }
.bs-docs-sidenav a:hover .icon-chevron-right { opacity: .5; }
.bs-docs-sidenav.affix { top: 10px; }

.bs-docs-sidenav.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 270px;
}

/* ========== Responsive helpers ========== */
.affix { top: 0px; }

/* ========== Media (legacy styles kept) ========== */
#media { margin-top: 70px; }
#media .header {
  margin-left: 0;
  margin-bottom: 56px;
  margin-top: 30px;
}
#media .post_row { margin-left: 0; margin-bottom: 40px; }
#media .lastpost_row { margin-bottom: 0; }
#media .post_row .post {
  background: #fff;
  border-radius: 4px;
  box-shadow: 1px 1px 2px 0px #E0E0E0;
  width: 487px;
  height: 616px;
}
#media .post_row .last { margin-right: 0; }
#media .post_row .post .img { position: relative; text-align: center; }
#media .post_row .post .img .date {
  background: #E8554E;
  position: absolute;
  padding: 2px 5px;
  top: 0; left: 11px;
}
#media .post_row .post .img .date p {
  color: #fff; font-size: 14px; font-weight: bold; font-style: italic; margin: 0;
}
#media .post_row .post .img img { height: 275px; width: 410px; }
#media .post_row .post .text { margin: 18px auto 0; width: 83%; }
#media .post_row .post .text h5 { margin: 0 0 8px 0; font-size: 20px; line-height: 23px; }
#media .post_row .post .text h5 a { color: #333; }
#media .post_row .post .text span.date {
  color: #9F9F9F; display: block; margin-bottom: 12px; font-style: italic; font-size: 13px;
}
#media .post_row .post .text p { margin: 0; line-height: 21px; font-size: 14px; }
#media .post_row .post .author_box {
  margin: 12px auto 20px;
  border-top: 1px solid #EDEDED;
  overflow: hidden;
  text-align: left;
  width: 85%;
  padding-top: 12px;
}
#media .post_row .post .author_box h6 {
  margin: 0 0 3px 0; font-size: 13px; line-height: 15px; font-style: italic; font-weight: normal; color: #B2B2B2;
}
#media .post_row .post .author_box p {
  color: #B2B2B2; font-style: italic; font-size: 13px; line-height: 14px; margin: 0;
}
#media .post_row .post .author_box img { float: right; }
#media .post_row .post a.plus_wrapper {
  width: 99%; text-align: center; background: #fff; display: none; border-radius: 0 0 4px 4px;
  padding: 6px 0 2px; margin: 0 auto 1px;
}
#media .post_row .post a.plus_wrapper span { color: #1189D9; font-size: 30px; font-weight: bold; }
#media .post_row .post:hover a.plus_wrapper { display: block; }
#media .post_row .post:hover { box-shadow: 0px 1px 5px 1px rgb(216,216,216); }
#media .post_row .post:hover .text h5 a { color: #1189D9; }

/* ========== Map box ========== */
.map .box_wrapp {
  position: absolute;
  margin: 15px auto;
  box-shadow: 0 0 7px 0 rgba(26,26,26,0.4);
  padding: 30px 0 30px;
  background: white;
  border-radius: 4px;
  margin-top: 25px;
}
.map .box_wrapp .box_cont { margin: 30px auto; width: 76%; }

/* ========== Sections / Features ========== */
.section-header { text-align: center; margin-bottom: 35px; }
.section-header h1, .title-text {
  font-weight: bold; font-size: 30px; margin: 12.5px 0; font-weight: 100; margin-bottom: 25px; line-height: 55px;
}
.feature-item:hover { box-shadow: 0px 1px 5px 1px rgb(216,216,216); }
.feature-item img { margin: 0 15px; max-width: 90%; height: 200px; }
.feature-item h5 { margin: 20px 15px; }
.feature-item p { margin: 0 15px; }
.feature-heading { margin: 20px 15px; }
.feature-heading a:hover { text-decoration: none; }
.feature-button { font-size: 16px; background-image: none; box-shadow: none; margin-bottom: 10px; }
.centered { text-align: center; }
.subhead { text-align: left; border-bottom: 1px solid #ddd; }

/* ========== Jumbotron ========== */
.jumbotron {
  position: relative;
  padding: 45px 0 35px 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
  background: #30393C;
  background: linear-gradient(45deg, #30393C 0%, #000000 100%) repeat;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
}
.jumbotron:after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  opacity: .4;
}
.lead { margin-bottom: 0; font-size: 21px; font-weight: 200; line-height: 15px; }

/* ========== Images (floats / publications thumbs) ========== */
img.float-left  { float: left;  margin: 9px 30px 12px 0; }
img.float-right { float: right; margin: 9px 0 12px 30px; }
img.publications-thumb { width: 142px; height: 188px; }

/* ========== Generic captions ========== */
.caption { margin: 10px; }

/* ========== Video responsive ========== */
.responsive-video { position: relative; padding-bottom: 56.25%; padding-top: 60px; overflow: hidden; }
.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
  position: absolute; top: 0; left: 0; width: 93.5%; height: 93.5%;
}
.video-caption { margin: 10px; }

/* ========== Misc ========== */
.accordion { margin-bottom: 20px; margin-right: 40px; }
.thumbnail > img.sponsor { width: 212px; height: 150px; }
img.carousel-image { width: 100%; }
li.publication { margin-bottom: 20px; }
.page-header h3 a:hover { text-decoration: none; }

/* ========== Map iframe ========== */
iframe.map-frame {
  border: none; overflow: hidden;
  margin: 10px 0;
  height: 550px; width: 100%;
}

/* ========== Sponsors ========== */
ul.sponsors { margin: 40px 0; }

/* ========== Footer ========== */
#footer {
  position: relative;
  z-index: 1;  
  margin-top: 50px;
  margin-bottom: 0;
  padding-bottom: 25px;
  border-top: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-align: center;
  background-color: #000;
  border-top-width: 8px;
  border-top-style: solid;
  border-top-color: #2F2F2F;
}
#footer h3 {
  font-size: 19px;
  text-transform: uppercase;
  font-family: BebasNeueRegular;
  color: #8DBECE;
  border-bottom: 1px solid #30393C;
  line-height: 35px;
  margin: 25px 0 20px;
  font-weight: normal;
}
#footer a img { margin-top: 40px; }
#footer p, #footer address { color: #8F8F8F; font-size: 11px; }

/* =========================================================
   Publications page text alignment
   ========================================================= */
.publication {
  text-align: justify;
  line-height: 1.6;
}

/* =========================================================
   Section Divider (Conference / Workshop Headings)
   ========================================================= */
.section-divider {
    margin: 50px 0 25px 0;
    text-align: center;
    position: relative;
}

.section-divider::before,
.section-divider::after {
    content: "";
    display: block;
    border-top: 1px solid #ccc;
    margin: 12px 0;
}

.section-divider h3 {
    margin: 0;
}

/* =========================================================
   GALLERY: Bootstrap 3-per-row + Equal Height Thumbnails
   ========================================================= */

/* Keep Bootstrap's ul offset so 3 items fit per row with span4 */
.thumbnails.da-thumbs.gallery-grid {
  margin-left: -20px !important;   /* critical for 3-per-row with .span4 */
  display: block !important;       /* cancel any flex that may exist */
  padding-left: 0 !important;
}

/* Use Bootstrap float + width for .span4 (≈31.914%) */
.thumbnails.da-thumbs.gallery-grid > li {
  float: left !important;
  margin-left: 20px !important;
  width: 31.914893617% !important; /* span4 width */
  box-sizing: border-box;
}

/* Equal-height thumbnail crop box */
.thumbnails.da-thumbs .thumbnail {
  height: 220px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.15);
}

/* Image fills the box */
.thumbnails.da-thumbs .thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .2s, box-shadow .2s;
}

.thumbnails.da-thumbs .thumbnail img:hover {
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(0,0,0,0.25);
}

/* Caption under thumbnails */
.thumbnails.da-thumbs.gallery-grid .caption {
  text-align: justify;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
}

/* Responsive: 2-per-row and 1-per-row */
@media (max-width: 900px) {
  .thumbnails.da-thumbs.gallery-grid > li {
    width: 48% !important;         /* ~two per row with margin gaps */
  }
}
@media (max-width: 600px) {
  .thumbnails.da-thumbs.gallery-grid {
    margin-left: 0 !important;
  }
  .thumbnails.da-thumbs.gallery-grid > li {
    width: 100% !important;
    margin-left: 0 !important;
  }
}
/* ==== Gallery: force 3 items per row, safe override ==== */
.thumbnails.da-thumbs.gallery-grid {
  /* kill old bootstrap offset; we control the layout */
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.thumbnails.da-thumbs.gallery-grid > li {
  /* three columns with consistent gaps */
  float: left !important;
  box-sizing: border-box;
  width: 32% !important;      /* 3 × 32% + 2 gaps × 2% = 100% */
  margin-left: 2% !important; /* horizontal gap */
}

/* first column in each row: no left gap */
.thumbnails.da-thumbs.gallery-grid > li:nth-child(3n+1) {
  margin-left: 0 !important;
}

/* keep all thumbnails same visual height */
.thumbnails.da-thumbs .thumbnail {
  height: 220px !important;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.15);
}
.thumbnails.da-thumbs .thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* crop to fill (no stretching) */
  display: block;
}

/* captions unchanged, just ensure spacing is neat */
.thumbnails.da-thumbs.gallery-grid .caption {
  text-align: justify;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {       /* 2 per row on tablets */
  .thumbnails.da-thumbs.gallery-grid > li {
    width: 49% !important;        /* 2 × 49% + 1 × 2% ≈ 100% */
    margin-left: 2% !important;
  }
  .thumbnails.da-thumbs.gallery-grid > li:nth-child(2n+1) {
    margin-left: 0 !important;
  }
}
@media (max-width: 600px) {       /* 1 per row on phones */
  .thumbnails.da-thumbs.gallery-grid > li {
    width: 100% !important;
    margin-left: 0 !important;
  }
}
/* ===== Footer polish (email link, map button, logo, © line) ===== */
#footer {
  background: #000;
  padding: 35px 0 15px;
  text-align: center;
  color: #fff;
  font-family: "Open Sans", Arial, sans-serif;
}

/* Email link */
#footer .footer-link {
  color: #8dcff0;
  text-decoration: none;
  border-bottom: 1px dotted rgba(141, 207, 240, 0.6);
  padding-bottom: 2px;
}
#footer .footer-link:hover {
  color: #b4e3ff;
  border-bottom-style: solid;
}

/* "Show Map" button */
#footer .footer-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 14px;
  border: 1px solid #3aa0d8;
  border-radius: 6px;
  color: #8dcff0;
  text-decoration: none;
  transition: all .15s ease-in-out;
}
#footer .footer-btn:hover {
  background: rgba(141, 207, 240, 0.12);
  transform: translateY(-1px);
}

/* ===== Footer logo size tuning ===== */
#footer .footer-logo {
  width: 200px;         
  height: auto;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  margin-top: 5px;
  margin-bottom: 5px;
  transition: transform 0.2s ease-in-out;
}

/* Hover effect (optional but looks nice) */
#footer .footer-logo:hover {
  transform: scale(1.05);
}

/* Copyright */
.footer-bottom {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #30393c;
  font-size: 12px;
  color: #9aa7b4;
  text-align: center;
}

/* Alignment for layout */
#footer .span5 {
  text-align: center;
}
#footer .container-fluid > .row-fluid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
/* ===== Tighten space right ABOVE the footer ===== */

/* kill big bottom margin on the last section */
#media { margin-bottom: 12px !important; }
#media .post_row { margin-bottom: 0 !important; }

/* if any <hr> is the last thing before the footer, hide it */
.container > hr:last-child,
.container-fluid > hr:last-child { display: none !important; }

/* make sure the element just before #footer never pushes it down */
.container > *:last-child,
.container-fluid > *:last-child,
.row-fluid:last-of-type {
  margin-bottom: 0 !important;
}

/* trim the footer’s own top padding */
#footer { padding-top: 18px !important; }
#footer .container-fluid { padding-top: 0 !important; }
#footer .row-fluid { margin-top: 0 !important; }
/* footer logo size (adjust as you like) */
#footer .footer-logo { width: 200px; height: auto; }

/* === Justify only the paragraph text under each Recent News item === */
.row-fluid.marketing .feature-item > p {
  text-align: justify !important;
  text-justify: inter-word !important;
  line-height: 1.6 !important;
  word-spacing: 0.08em;
  margin-top: 6px;
}
/* ===== People page: make each person row a flex row and center items ===== */

/* Only the two-column rows inside the three sections */
#principalinvestigator .row-fluid,
#graduate .row-fluid,
#undergraduate .row-fluid {
  display: flex !important;          /* use flexbox row */
  align-items: center !important;     /* vertical center image vs text */
  gap: 18px;                          /* some space between cols */
  margin-bottom: 22px;                /* spacing between person cards */
}

/* Turn off old floats and give explicit widths (Bootstrap 2 spans mimic) */
#principalinvestigator .row-fluid .span3,
#graduate .row-fluid .span3,
#undergraduate .row-fluid .span3,
#principalinvestigator .row-fluid .span9,
#graduate .row-fluid .span9,
#undergraduate .row-fluid .span9 {
  float: none !important;             /* cancel float */
  margin: 0 !important;               /* remove float margins */
}

/* Left column (photo) width */
#principalinvestigator .row-fluid .span3,
#graduate .row-fluid .span3,
#undergraduate .row-fluid .span3 {
  width: 26% !important;              /* ~span3 of 12 cols */
  min-width: 180px;                   /* keep a reasonable min size */
  display: flex;                      /* so we can center thumbnail if needed */
  justify-content: center;            /* horizontal center inside the photo col */
}

/* Right column (text) width */
#principalinvestigator .row-fluid .span9,
#graduate .row-fluid .span9,
#undergraduate .row-fluid .span9 {
  width: 74% !important;              /* ~span9 of 12 cols */
}

/* Keep thumbnail nice and centered without fixed heights */
#principalinvestigator .row-fluid .span3 .thumbnail,
#graduate .row-fluid .span3 .thumbnail,
#undergraduate .row-fluid .span3 .thumbnail {
  margin: 0;                          /* remove default margins */
  border-radius: 6px;
  display: block;                     /* block so width/auto works */
}

/* Image sizing: scale down if large, no stretching */
#principalinvestigator .row-fluid .span3 .thumbnail img,
#graduate .row-fluid .span3 .thumbnail img,
#undergraduate .row-fluid .span3 .thumbnail img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mobile: stack columns again */
@media (max-width: 767px) {
  #principalinvestigator .row-fluid,
  #graduate .row-fluid,
  #undergraduate .row-fluid {
    display: block !important;
  }
  #principalinvestigator .row-fluid .span3,
  #graduate .row-fluid .span3,
  #undergraduate .row-fluid .span3,
  #principalinvestigator .row-fluid .span9,
  #graduate .row-fluid .span9,
  #undergraduate .row-fluid .span9 {
    width: 100% !important;
  }
}
/* =====================================
   IMAGE ONLY HEADER (FINAL FIX)
   ===================================== */

header.jumbotron.subhead {

    height: 200px;     
    
    background-image: url("../images/cover-1.png");
    background-repeat: no-repeat;
    background-position: center top;   /* ← KEY CHANGE */
    background-size: cover;

    padding: 0;
    margin: 0;
}

/* Hide header text */
header.jumbotron.subhead h1,
header.jumbotron.subhead p,
header.jumbotron.subhead .lead {
    display: none;
}


/* =====================================
   MOBILE
   ===================================== */

@media (max-width: 768px) {

    header.jumbotron.subhead {
        height: 170px;
        background-position: center;
    }

}

/* --- BlueImp Gallery Fix: Show Close button, hide Prev/Next --- */

/* Close button visible */
.blueimp-gallery .close {
    display: block !important;
    font-size: 40px !important;
    color: white !important;
    opacity: 1 !important;
    z-index: 99999 !important;
}

/* Hide Prev/Next buttons completely */
.blueimp-gallery .prev,
.blueimp-gallery .next {
    display: none !important;
}

/* ===== CAROUSEL FIXED HERO BANNER ===== */

#main-carousel {
    height: 500px;
}

#main-carousel .carousel-inner,
#main-carousel .item {
    height: 500px;
    background-color: #fff;
}

#main-carousel .item img {
    width: 100%;
    height: 500px;
    object-fit: contain;
}

/* =====================================
   RESEARCH PAGE Picture and Text Alignment
   ===================================== */

/* Each research section = isolated */
.research-block {
    overflow: hidden;
    clear: both;
    margin-bottom: 40px;
}

/* Image behaviour */
.research-block img {

    width: 260px;
    max-width: 40%;

    height: auto;
    max-height: 260px;

    float: right;

    margin-left: 25px;
    margin-bottom: 10px;

    border-radius: 4px;
}

/* Text justify */
.research-block p {
    text-align: justify;
}

/* CRITICAL FIX — prevents float collapse */
.research-block::after {
    content: "";
    display: block;
    clear: both;
}

/* =====================================
   RESEARCH PAGE SIDEBAR (FINAL FIX)
   ===================================== */

.research-page .bs-docs-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
    padding-bottom: 40px;
}

/* Sidebar -> scrollable */
@media (min-width: 768px) {
    .research-page .bs-docs-sidenav {
    max-height: none;
    overflow: visible;
  }
}

/* =====================================
   MOBILE PERFECT FIX 
   ===================================== */

/* Images No overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Header image responsive */
.jumbotron img,
header img {
    width: 100%;
    height: auto;
}

/* Float collapse prevent */
header {
    overflow: hidden;
}

/* =====================================
   MOBILE NAVBAR PERFECT FIX
   ===================================== */

@media (max-width: 767px) {

    /* Menu vertical stack */
    .navbar .nav {
        display: block;
        text-align: center;
        float: none;
    }

    .navbar .nav li {
        display: block;
        float: none;
        width: 100%;
    }

    .navbar .nav li a {
        display: block;
        padding: 12px 0;
        font-size: 14px;
        line-height: 1.4;
    }
}
/* ===== CRITICAL RESEARCH PAGE FIX ===== */
.research-page {
    overflow-x: hidden;
}

/* =====================================
   TRUE PAGE LAYOUT FIX
   ===================================== */

html, body {
    height: 100%;
}

.research-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.research-page .container {
    flex: 1;
}

#footer {
    margin-top: 0;
}

/* =====================================
   PUBLICATIONS PAGE LAYOUT FIX 
   ===================================== */

.publications-page #footer {
    margin-top: 30px !important;
}

.publications-page .container > hr {
    margin: 10px 0 !important;
}