/* Body of website */
/* Defines General body for all website - background colour, font family, base font size */
body { padding-top: 56px; 
    color: #000000;
    font-size: 1.1em;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    
    background: linear-gradient(
        to top,      /* bottom to top */
        #86ac92,
        #cbddd1   
      );
    }

    /* HOME */
    .col-lg-12 { 
      position: relative;   /* needed for ::before to align */
      background-color: #6d9fb3;
      aspect-ratio: 3 / 1; 
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 85%);
      display: flex;
      flex-direction: column;      
      align-items: center;       
      justify-content: center; 
      place-items: left;        
      color: white;
      box-sizing: border-box;
      margin-top: 4em;
    }
    .col-lg-12::before {
      content: "";
      position: absolute;  /* allows positioning */
      top: 0;
      left: 0;
      width: 40%;
      height: 100%;
      background: url('https://static.igem.wiki/teams/5785/homeimage/motif-logo.webp') no-repeat center center; /* background image */
      background-size: cover; /* cover full area */
      opacity: 0.4;          /* faint, so text is visible */
      z-index: 0;           /* stays behind all content */
    }
    
    .col-lg-12 h1.display-4 {
      font-style: italic;
      font-weight: bold;
      color: #ffffff;
      margin: 10px 12px 0 20%; 
      padding-left: 2em;
      position: relative;
      text-align: right;
      z-index: 2;
    }

    .col-lg-12 p {
      font-style: italic;
      position: relative;
      text-align: center;
      margin-left: 17em;
      width: 50%;
      z-index: 2;
    }

    .img_intro {
      /* display: block;*/
      margin: 3em auto;   /* centers image */
      max-width: 30%;    
      height: auto;
      position: absolute;
      top: 0;
      right: -20;   /* missing unit, added px */
      object-fit: contain;
      z-index: 1;
    
      /* animation */
      animation: float 4s ease-in-out infinite;
    }
    
    /* floating effect */
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-15px); } /* goes up */
      100% { transform: translateY(0px); }  /* back down */
    }

    h1 {
      font-style: italic;
      color: #ffffff;
      width: 50%;
      justify-content: left;
      margin-left: 10em;
    }
    
    h2 {
      font-style: italic;
      margin: 0;
      font-weight: bold;
    }
    
    .row {
      display: flex;
      align-items: center;       /* vertically align text + image */
      gap: 20px;                 /* space between the two columns */
    }
    
    .row .col {
      flex: 1;                   /* take available space for text */
    }
    
    .row .problem_img {
      flex: 1;                   /* take available space for image */
      display: flex;
      justify-content: center;   /* center image inside */
    }
    
    .row .problem_img img {
      max-width: 60%;
      height: auto;
      border-radius: 8px;        /* optional styling */
    }
    .problem-images {
      display: flex;
      justify-content: center;  /* centers both images */
      gap: 2em;                /* space between the images */
    }
    
    .problem_img1 {
      width: 50%;             /* make them smaller */
      height: 40%;             /* keep aspect ratio */
    }
    
    .three_links {
      display: flex;
      justify-content: center;   /* centers the group */
      gap: 5.5em;                 /* spacing between the 3 blocks */
      text-align: center;        /* centers the text under each h3 */
      flex-direction: row;
      margin-bottom: 8em;
      margin-top: 6em;
    }

    .home_link {
      display: flex;
      flex-direction: column;    /* stacks h3 on top of image */
      align-items: center;       /* centers content horizontally */
      width: 100%;              /* adjust width as needed */

    }
    
    .home_link h3 {
      margin-bottom: -.3em;
      font-style: italic;
      font-weight: bold;
    }
    
    .home_link img {
      width: 100%;               /* fills container width */
      height: auto;              /* keeps aspect ratio */
      max-width: 280px;          /* prevents images from being too big */
      border-radius: 8px;        /* optional rounded corners */
      transition: transform 0.3s ease;
    }
    
    .home_link img:hover {
      transform: translateY(-10px); /* makes it levitate */
    }

    .solution_container {
      display: flex;
      align-items: center;      /* vertically align text with image */
      justify-content: center;  /* center content in container */
      gap: 50px;                /* spacing between image and text */      
      margin: 40px auto;        /* center section on page */
      padding: 20px;
      margin-top: 4em;
    }
    
    .solution_img img {
      max-width: 100%;         /* control image size */
      width: 100%;              /* responsive scaling */
      height: auto;
      display: block;
      border-radius: 8px; 
      margin-bottom: 3em;      /* optional rounded corners */
    }
    
    .solution_text {
      max-width: 50%;         /* keeps text readable */
    }
    .imega_video {
      width: 100%;         /* 40% of container width */
      max-width: 100%;   /* don’t let it grow too big */
      height: auto;
      margin: 20px auto;
      margin-top: -5em;
    }
    
    .aim_container {
      display: flex;
      align-items: center;       /* vertically align text with image */
      justify-content: center;   /* center the two columns */
      gap: 7em;                 /* space between text and image */
      max-width: 1200px;         /* optional: keeps content centered */
      margin: 40px auto;
      padding: 20px;
      margin-top: 4em;
    }
    
    .aim_text {
      flex: 1;                   /* text takes equal space */
      max-width: 100%;
    }
    
    .aim_img {
      flex: 1;                   /* image takes equal space */
      display: flex;
      justify-content: center;   /* center image in its column */
    }
    
    .aim_img img {
      max-width: 100%;          /* controls image size */
      width: 100%;
      height: auto;
      border-radius: 8px;        /* optional styling */
    }
    
    
    .left-aligned { 
      margin-left: auto; 
    }
    
    .bg-dark {
      background-color: #6d9fb3 !important; 
      /* border: #ffffff .3em solid; */
    }
    
/* STYLE CODES */
/* variables that contain the website colours so that large scale colour pallette changes/experiments can be made*/
:root {
  --bGreen: #cbddd1;      /*background green colour*/
  --yellow: #c6b67b;      /*standard yellow*/
  --blue: #6d9fb3;        /*standard blue*/
  --hGreen: #b7d0b2;      /*heading green colour*/
  --lowOpacityBlack: #0000001a;   /*Drop shadow standard colour*/
} 


/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/****************************************************************/
/* Menu Bar */
/* Adds a drop shadow behind the logo on the menu bar */
.team-logo  {
  --shadow: #FFFFFF;
  width: 100;
  height: auto;
  filter: drop-shadow(0.4px 0px 0.4px var(--shadow)) drop-shadow(-0.4px 0px 0.4px var(--shadow)) drop-shadow(0px 0.4px 0.4px var(--shadow)) drop-shadow(0px -0.4px 0.4px var(--shadow));
}

/* Adds a little drop shadow to the menu bar */
.main-menu {
  box-shadow: 0px 1px 3px var(--lowOpacityBlack);
}

/* menu bar links */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
    color: white; /* change this to your preferred color */
}

/* Dropdown menu items */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover {
    background-color: #7fb291; /* highlight background */
    color: white; /* text color */
}

/* footer */
/*footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }*/

/****************************************************************/
/*footer*/
footer {
  z-index: 1;
  position: relative;
  background-color: var(--blue);
  padding-bottom: 3rem !important;
  padding-top: 3rem !important;
  color: white;
}

footer h3, footer h4 {
  color: var(--white) !important;
}

footer a {
  color: var(--gray);
}

footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.container{
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

/*sponsors*/
.sponsors-grid {
  display: flex;
  flex-wrap: wrap;
}

.sponsors-grid:nth-child(-n+3) {
  align-items: center;
  justify-content: center;
}

.sponsor-image {
  padding: .75rem;
  width: fit-content;
}

.sponsor-image img {
  --shadow: #ffffff; 
  height: 80px;
  width: auto;
  filter: drop-shadow(1px 0px 0.5px var(--shadow)) drop-shadow(-1px 0px 0.5px var(--shadow)) drop-shadow(0px 1px 0.5px var(--shadow)) drop-shadow(0px -1px 0.5px var(--shadow));
}

/*contact*/
.contact{
    flex: 0 0 auto;
    width: 25%;
}

.contact a {
  margin: 4px;
  height: fit-content;
  display: flex;
}

.contact a div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.contact a p {
  margin: 0;
  padding: 0;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
  margin-bottom: 1.5rem !important;
}

/****************************************************************/
/* PAGE LAYOUT */
/* Generic two-column layout with sidebar (e.g., table of contents + content) */

.layout {
  display: flex;         
  align-items: flex-start;
  gap: 45px; 
}

.content {
  flex: 1;               
}

/****************************************************************/
/* TABLE OF CONTENTS */
.toc {
  position: sticky;   
  top: 90px;
  background: #f9f9f9;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 220px; 
  flex-shrink: 0;
  margin: 0; 
}

.toc h3 { font-size: 1.2em; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
.toc ul { list-style: none; padding: 0; margin: 0; } /* TOC lists */
.toc li {margin-bottom: 6px; } /* Space between sections */
.toc a { color: #1a1a1a; font-weight: bold; text-decoration: none; } /* Links */
.toc a:hover { color: #7fb291; }

/****************************************************************/
/* HEADER FOR EACH PAGE */
/* The table of contents*/
.page-header {
  background-size: cover;
  background-repeat: no-repeat;
  height: 450px;

  border: 12px solid #fff;   
  border-radius: 8px;     
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
} 

/* Header image for each page, includes url and position */
.header-team {background-position: center 65%; background-image: url('https://static.igem.wiki/teams/5785/header/members-header-image.webp');}
.header-experiments {background-position: center 65%; background-image: url('https://static.igem.wiki/teams/5785/header/experiments-header-image.webp');}
.header-engineering {background-position: center 35%; background-image: url('https://static.igem.wiki/teams/5785/header/engineering-header-image.webp');}
.header-description {background-position: center 100%; background-image: url('https://static.igem.wiki/teams/5785/header/description-header-image.webp');}
.header-attribution {background-position: center 35%; background-image: url('https://static.igem.wiki/teams/5785/header/attributions-header-image.webp');}
.header-parts {background-position: center 50%; background-image: url('https://static.igem.wiki/teams/5785/header/header-part.webp');}
.header-software {background-position: center 55%; background-image: url('https://static.igem.wiki/teams/5785/header/software1-header-image.webp');}
.header-hp {background-position: center 55%; background-image: url('https://static.igem.wiki/teams/5785/header/hp-header-image.webp');}
.header-contribution {background-position: center 35%; background-image: url('https://static.igem.wiki/teams/5785/header/contribution1-header-image.webp');}
.header-notebook {background-position: center 50%; background-image: url('https://static.igem.wiki/teams/5785/header/notebook1-header-image.webp');}
.header-results {background-position: center 35%; background-image: url('https://static.igem.wiki/teams/5785/header/results-header-image.webp');}
.header-collaboration {background-position: center 55%; background-image: url('https://static.igem.wiki/teams/5785/header/header-image-collab.webp');}

/****************************************************************/
/* TEAM CARDS (for members page) */

/* Team section: Each section (Students, Mentors, PIS.) */
.team-section {
  margin: 0 auto 40px;   
  max-width: 1200px;     
  text-align: center;
  margin-left: 20px;
}

/* Team cards: Container holding all cards inside a section */
.team-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* Team card */
.team-card {
  width: 240px;  
  background-color: #f8f9fa;
  border-radius: 10px;
  border: 10px solid #f8f9fa;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.2s;
}

.team-card:hover {
  transform: translateY(-5px); /* card "lifts" slightly on hover */
}

/* Card image */
.team-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
}

.team-card h3 { margin: 10px 0 5px; } /* Card title */
.team-card p { font-size: 0.9em; color: #555; } /* Card text */

/****************************************************************/
/* TABLE STYLE FOR HUMAN PRACTICES PAGE*/
table {
  border-collapse: collapse; /* Merge borders */
  width: 100%;               /* Full width */
}

th, td {
  border: 1px solid black;   /* Table cell borders */
  padding: 8px;              /* Space inside cells */
  text-align: left;          /* Align text to the left */
  vertical-align: top;       /* Align top for multi-line cells */
}

th {
  background-color: var(--blue); /* Optional: light grey header */
}

caption {
  caption-side: bottom;
}

/* Only for tables that need the caption on top */
table.top-caption caption {
  caption-side: top;
}

/* DROP DOWN SECTION */
details {
  border: 2px solid #548d55; /* green border, change color as needed */
  padding: 15px;
  margin: 10px 0;
  border-radius: 8px;         /* rounded corners */
  background-color: #f9f9f9;  /* optional light background */
}

summary {
  font-weight: bold;
  cursor: pointer;             /* shows pointer on hover */
}

details[open] {
  background-color: #eefaf0;   /* optional different color when expanded */
}

/* PDF specifications - to include our survey and lab notebook */
.pdf-container {
  border: 2px solid #548d55; /* Green border */
  border-radius: 8px;         /* Rounded corners */
  width: 100%;                /* Full width */
  max-width: 1200px;           /* Optional max width */
  height: 70vh;                /* Visible height */
  overflow: auto;             /* Scroll inside container */
  margin: 20px 0;             /* Space above/below */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Optional shadow */
}

.pdf-container iframe {
  width: 100%;
  height: 100%;              /* Taller than container to allow scroll */
  border: none;
}

/* Figures for HP - from our survey */
figure {
  margin: 20px auto;
  max-width: 700px;
  text-align: center;
}

figure img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.smaller-figure {
  max-width: 400px;  /* smaller size just for this one */
}

figcaption {
  margin-top: 10px;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.4;
}

.two-images {
    display: flex;
    gap: 20px;              /* space between the images */
    justify-content: center;
    flex-wrap: wrap;        /* stack on small screens */
}

.two-images img {
  flex: 1 1 45%;          /* responsive width */
  max-width: 500px;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/****************************************************************/
/* CUSTOM LINK */
.custom-link {
    color: #079468;              /* normal text color (dark gray/black) */
    text-decoration: underline;    /* remove underline */
    font-weight: 600;         /* optional: bold for emphasis */
  }

.custom-link:hover {
  color: #005d21;           /* hover color */
  text-decoration: underline;
}

/****************************************************************/
/* ADJUSTMENTS FOR WHEN ACCESSING THE WIKI ON MOBILE */
@media (max-width: 500px) {
  /* Hide the table of contents */
  .toc {
    display: none;
  }

  /* Reduce header image height */
  .page-header {
    height: 200px;   /* smaller than the default 450px */
    border-width: 6px; /* thinner border so it doesn't take too much space */
  }

  /* Make layout stack vertically instead of side-by-side */
  .layout {
    flex-direction: column;
    gap: 20px; 
  }

  /* Team cards can shrink a bit for mobile */
  .team-card {
    width: 100%;  
    max-width: 300px; 
  }

  .contact {
    width: 100%;  
  }

  .contact a div {
    flex-direction: row; 
    align-items: center;
    flex-wrap: wrap; 
  }

  .contact p {
    word-break: break-word; 
    white-space: normal;   
  }

  footer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 14px;
  }

  .sponsors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;                    
    justify-items: center;         
    width: 100%;                   
    box-sizing: border-box;        
    padding: 0 10px;               
  }

  .sponsor-image {
    width: 100%;                   
    display: flex;
    justify-content: center;
  }

  .sponsor-image img {
    max-width: 100%;               
    max-height: 50px;
    width: auto;                    
    height: auto;
    object-fit: contain;            
    display: block;
  }

  .col-lg-12 {
    position: relative;
    aspect-ratio: 1.7/1;
    margin-top: 1em;
    padding: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 85%);
    height: auto;
    min-height: 150px;
  }
    
  .col-lg-12 h1.display-4 {
    margin: 0 0 2px 0;
    font-size: 1.6rem !important;
    text-align: center;
    width: 100%;
  }
  .col-lg-12 p {
    font-size: 0.8rem !important;
    top: -15; 
    padding: 0 2px;  
    text-align: center;
    max-width: 100%;
  }
    
  /* Keep your image styles for mobile */
  .img_intro {
    position: absolute;
    max-width: 30%;
    top: 10px;
    transform: translateY(45%);
    margin: 0;
    z-index:1;
    animation: none;
  }

  .three_links {
    gap: 1em;
  }

  h1, h2, .col-lg-12 p {
    width: 90% !important;     /* make text almost full width */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1em !important;
    text-align: center !important;
  }

  .row, .solution_container, .aim_container {
    flex-direction: column;    /* stack images & text vertically */
    gap: 1.5em;                /* smaller spacing */
    align-items: center;       /* center everything */
  }

  .row .col, .solution_text, .aim_text {
    width: 100% !important;    /* full width on small screens */
    max-width: 100%;
  }

  .problem_container {
    width: 90%;
    padding: 0 10%;          /* horizontal padding */
    box-sizing: border-box;  /* includes padding in width */
  }

  .problem_img,
  .problem_img1 {
    width: 90%;             /* container takes 90% of screen width */
    margin: 1em auto;       /* centers container and adds vertical spacing */
    display: block;
  }

  /* Make images scale to their container */
  .problem_img img,
  .problem_img1 img {
    width: 100%;            /* fill container width */
    height: auto;           /* maintain aspect ratio */
    display: block;
    border-radius: 8px;     /* optional styling */
  }

  .home_link {
    width: 90%;                /* allow the 3 links to shrink */
    margin: 1em auto;
  }

  .home_link img {
    max-width: 80%; /* shrink images a bit */
  }

  .aim_container {
    flex-direction: column;  /* stack text and image */
    gap: 2em;                /* smaller gap */
    padding: 10px;
  }

  .aim_img img {
    max-width: 300px;         /* cap image width */
    width: 90%;               /* scale down for smaller screens */
    margin: 0 auto;           /* center the image */
  }

  .solution_img img {
    max-width: 90%;
  }

  .problem-images {
    display: flex;
    flex-direction: row;       /* keep side by side */
    justify-content: space-between; /* spread out with space around */
    max-width: 95vw;           /* leave some space on sides */
    margin: 0 auto;            /* center the whole container */
    gap: 1em;                  /* space between images */
    flex-wrap: nowrap;          /* prevent wrapping */
  }
  
  .problem_img {
    width: 70%;                     /* larger image */
  }

  .problem_img1 {
    width: 48%;                /* make both images fit side by side with gap */
  }

  .problem_img img,
  .problem_img1 img {
    width: 100%;               /* fill their container */
    height: auto;              /* maintain aspect ratio */
    display: block;
    border-radius: 8px;
  }

  /* PDF CONTAINER USED IN HP PAGE */
  .pdf-container {
      width: 100%;      /* fill smaller screens */
      height: 80vh;     /* less tall so it’s not zoomed in */
      margin: 10px 0;   /* small top/bottom margin */
  }

  .pdf-container iframe {
    width: 100%;        /* force full width */
    height: 100%;
  }
}


/* Software Page */

.software-icon {
  width:10%;
  height: 10%;
}

.align-center {
  text-align: center;
  font-size: 14;
}

.software-diagram {
  width: 100%;
  height: auto;
  padding: 1em;
}

.software-chart {
  height: 80%;
  width:auto;
  padding:1em;
}

.software-picture {
  width:70%;
  height:auto;
  padding:1em;
}

.breathe {
  margin-bottom: 1em;
}