/* =======================================================================================
   BASE — page fundamentals
   Typography, body/page scaffold, scrollbars: everything that is not an element or the frame.
   Migrated 2026-08-21 out of the old monolithic style.css (5,483 lines); only rules the
   2026 site actually uses were kept. Values come from tokens.css wherever a token exists.
   ======================================================================================= */

/* ======================= GLOBAL VARIABLES ========================================================
   All design tokens (colours, type scale, breakpoint overrides) live in tokens.css. */
@import url("tokens.css");
@import url("elements.css");

* {
    overflow-anchor: none !important;
}
/* ======================= BASE STYLES ======================================================== */
img, picture, svg {
  max-width: 100%;
  display: block;
}
a {
    color:inherit;
}
a:hover {
    color: inherit;
}
.container-fluid {
  padding:0;
  margin-top: 0;
}
/* whole page setting */
body {
  background-color: var(--clr-body);  /* Light gray background */
  font-family: var(--font-family-primary); /* Use Nunito Sans font */
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  letter-spacing: 0%;
  text-align: justify;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--clr-text);   /* body copy reads the token, not browser default */
}
h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  font-weight: var(--fw-bold);
  text-align: left;
  color: var(--clr-ink);
}
/* the section heading is the big orange one in the mockups */
h2 {
  color: var(--clr-accent);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  margin-top: var(--space-5);
}
h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-h4);
}
h5 {
  font-size: var(--fs-h5);
}

/* ======================= FONTS ======================================================== */
@font-face {
    font-family: 'Nunito Sans';
    src: url('https://static.igem.wiki/teams/5775/fonts/nunitosans.ttf') format('truetype');
    font-weight: 200 1000; /* Full weight range */
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('https://static.igem.wiki/teams/5775/fonts/nunitosans-italic.ttf') format('truetype');
    font-weight: 200 1000;
    font-style: italic; /* Italic style */
}

@keyframes slideInSubmenuLink {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
body {
      font-size: var(--fs-body);
    
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.info-text {
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 0;
  color: var(--clr-text);
  font-size: calc(var(--fs-body)*0.9);
  font-family: var(--font-family-primary); 
  font-weight: var(--fw-regular);
}
.info-text p {
  text-align: justify;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 1199px) and (min-width: 992px) {
.d-none.custom-lg-flex {
      display: none !important;
    
  }
.custom-lg-8 {
      flex: 0 0 66.666667% !important;
      max-width: 66.666667% !important;
    
  }
.custom-lg-4 {
      flex: 0 0 33.333333% !important;
      max-width: 33.333333% !important;
    
  }
}

@media (max-width: 991px) {
.custom-lg-8, .custom-lg-4 {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    
  }
}

/* Keyframe Animation for Bounce */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes fade {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }  
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ------ BINDER FIGURES ------ */
.binder-fig {
    width: 100%;
    background-color: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid var(--clr-heading);
  
}

@media (min-width: 1800px) {
.binder-fig {
          width: 80%;
      
  }
}
.tbody-binder tr {
    border-bottom: 1px solid #ddd;
}
.tbody-binder tr:last-child {
    border-bottom: 3px solid black;
}

@media screen and (max-width: 768px) {
th, td {
          padding: 8px;
      
  }
}