@charset "UTF-8";
/* Responsive CSS for Biochip Site */

/* ==========================================================================
   Base Responsive Resets
   ========================================================================== */

/* Box-sizing for easier calculations */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Make images fluid */
img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Hamburger Menu Button
   ========================================================================== */

.hamburger {
  display: none;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1001;
  background-color: #005518;
  color: #ffffff;
  border: none;
  padding: 10px 14px;
  font-size: 24px;
  cursor: pointer;
  border-radius: 4px;
  min-width: 44px;
  min-height: 44px;
}

.hamburger:hover {
  background-color: #003d11;
}

/* Overlay when menu is open */
.nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.nav-overlay.open {
  display: block;
}

/* ==========================================================================
   Desktop Layout (769px and above)
   ========================================================================== */

@media (min-width: 769px) {
  #container {
    display: flex;
    border-left: none !important;
  }

  #leftnav {
    flex: 0 0 246px;
    margin-left: 0 !important;
    width: 246px !important;
  }

  #content,
  #news,
  #newsStory {
    flex: 1;
    min-width: 0;
  }
}

/* ==========================================================================
   Mobile Layout (768px and below)
   ========================================================================== */

@media (max-width: 768px) {
  /* Show hamburger button on mobile */
  .hamburger {
    display: block;
    min-width: 44px;
    min-height: 44px;
  }

  /* Reset container border trick */
  #container {
    display: block;
    border-left: none !important;
  }

  /* Slide-out navigation */
  #leftnav {
    width: 280px !important;
    margin-left: 0 !important;
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    z-index: 1000;
    background-color: #ebf3db;
    overflow-y: auto;
    transition: left 0.3s ease;
    padding-top: 60px;
  }

  #leftnav.open {
    left: 0;
  }

  /* Touch target size - WCAG 2.1 AA requires 44x44px minimum */
  #leftnav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #leftnav > ul > li {
    min-height: 44px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  #leftnav > ul > li > ul > li {
    min-height: 44px;
  }

  /* Ensure main content links have adequate touch targets */
  #main-content a,
  main a {
    display: inline-block;
    min-height: 44px;
    line-height: 1.5;
    padding: 8px 0;
  }

  /* Footer link touch targets */
  #footer a {
    display: inline-block;
    min-height: 44px;
    padding: 8px 12px;
  }

  /* Header adjustments */
  #header {
    height: auto !important;
    min-height: 80px;
    background-size: cover;
    background-position: center;
  }

  /* Reduce fixed paddings for content */
  #container p,
  #container h1,
  #container h2,
  #container h3 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .pageHeader,
  .pageHeaderBlack,
  .sectionHeader,
  .sectionHeaderBlack,
  .subHeader,
  .subHeaderRed {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Reduce list margins */
  #container ol,
  #container ul {
    margin-left: 16px;
    margin-right: 16px;
  }

  /* Stack floated images */
  #container div.imageLeft,
  #container div.imageRight {
    float: none !important;
    width: 100% !important;
    padding: 16px !important;
    margin: 0 0 16px 0 !important;
  }

  #container div.imageCenter {
    min-width: auto;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Callout box adjustments */
  #callout,
  #callout2 {
    float: none !important;
    width: auto !important;
    margin: 16px !important;
  }

  /* Footer adjustments */
  #footer {
    line-height: 1.5em;
    padding: 16px;
    height: auto;
  }

  /* Clear div adjustments */
  #clear {
    height: 24px;
  }
}

/* ==========================================================================
   Small Mobile (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
  #header {
    min-height: 60px;
  }

  .hamburger {
    top: 8px;
    right: 8px;
    padding: 8px 12px;
    font-size: 20px;
    min-width: 44px;
    min-height: 44px;
  }

  #leftnav {
    width: 100% !important;
    left: -100%;
  }

  #container p,
  #container h1,
  #container h2,
  #container h3 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .pageHeader,
  .pageHeaderBlack {
    font-size: 1.1em !important;
  }

  /* Skip link adjustments for small screens */
  .skip-link:focus {
    width: 100%;
    text-align: center;
  }
}