/* --- overrides --- */
/* overrides .card's padding */
.species-profile { padding: 0; }
/* overrides for .species-photo and .intro-photo images */
.species-photo img,
.intro-photo img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}



/* --- layout --- */
.species-profile {
  /* .species-primary and .species-secondary stacked on top, aligned to top */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.species-primary, .species-secondary {
  /* display .species-primary and .species-secondary equal width */
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}



/* --- secondary (aside) --- */
.species-secondary {
  /* padding to match .species .content (primary) */
  padding: 0 1.25rem;
}

.secondary-title {
  padding: 1.25rem;
  width: 100%;
}

/* new flex container for .species-photo and .species-facts */
.secondary-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
/* display .species-photo and .species-fact equal width */
.species-photo, .species-facts {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* species photo */
.species-photo {
  /* 1px gap above */
  margin-top: 1px;
  margin-bottom: 0;
}
/* 1:2 aspect ratio */
.species-photo::before {
  content: '';
  display: block;
  padding-top: 50%;
}
.species-photo .species-name {
  font-size: 1rem;
  font-weight: 700;
}
.species-photo .scientific-name {
  margin-top: 0.25rem;
  font-style: italic;
}

/* species facts */
.species-facts {
  background-color: #cccccc;
}
.species-fact {
  position: relative;
  overflow: hidden;
  border-top: 1px solid white;
  line-height: 1.25;
  background-color: #453f3a;
}
/* left blue border */
.species-fact::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0.5rem;
  background-color: #3d9fc1;
}
/* label triggering input */
.species-fact .fact-heading {
  position: relative;
  display: block;
  /* leave room for down arrow and left blue border */
  padding: 0.75rem 1.75rem 0.625rem 1.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
/* down arrow icon */
.species-fact .fact-heading::after {
  content: '';
  position: absolute;
  top: 1.1875rem;
  right: 0.75rem;
  width: 7px;
  height: 8px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  background-image: url('../img/mmc_icons.svg');
  background-position: -61px -201px;
  /* icon initially semi-transparent */
  background-size: 860px 268px;
  opacity: 0.25;
}
/* icon fully opaque on hover */
.species-fact .fact-heading:hover::after { opacity: 1.0; }
/* hide input */
.species-fact input { display: none; }
/* fact text */
.species-fact .fact-text {
  padding: 0 0.625rem 0 1.125rem;
  /* height initially collapsed */
  max-height: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.species-fact .fact-text p {
  font-size: 0.875rem;
  color: white;
}
/* height expanded when input selected */
.species-fact input:checked + .fact-text {
  max-height: 30rem;
  padding-bottom: 0.625rem;
}

/* species map */
.species-map {
  overflow: hidden;
  margin-top: 0.75rem;
}
.species-map .hover-photo {
  position: relative;
  overflow: hidden;
}
/* figure overlay */
.species-map .hover-photo figure::before {
  content: '';
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.species-map .hover-photo img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  /* remove image border for IE */
  border: 0;
}
/* hover/focus interaction */
/* fade in overlay */
.species-map .hover-photo:hover figure::before,
.species-map .hover-photo:focus figure::before {
  opacity: 0.5;
}
/* zoom in image */
.species-map .hover-photo:hover img,
.species-map .hover-photo:focus img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

/* species photo gallery */
.species-gallery {
  /* new flex container for .frames */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  border-top: 1px solid white;
}

.species-gallery .frame {
  /* equal sized frames */
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /* remove all borders (from .frame class), and add 1px right border */
  border: none;
  border-right: 1px solid white;
}
/* remove last right border */
.species-gallery .frame:last-of-type {
  border-right: none;
}
/* initial image size */
.species-gallery img.wide { max-height: 7rem; }
.species-gallery img.tall { max-width: 7rem;  }



/* --- primary (article) --- */
/* redefines .content to be 3/4 of container's max-width */
.species-profile .content {
  max-width: 39.375rem;
  padding: 1.25rem;
}

.primary-title {
  /* initially hide .primary-title */
  display: none;
}

.species-intro { margin-top: 0; }

.intro-photo { margin-top: 2rem; }
/* 1:2 aspect ratio */
.intro-photo::before {
  content: '';
  display: block;
  padding-top: 50%;
}

/* species profile tabs */
.species-profile .tab-group {
  /* 1px border around tab group */
  position: relative;
  left: -1px;
  width: calc(100% + 2px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* apply some seperation between tabs and intro image */
  margin-top: 2.5rem;
}
.species-profile .tab-group .tabs {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* remove all margins set on links */
.species-profile .tab-group .tabs a { margin: 0; }
/* remove top margin from several elements */
.species-profile .tab-group .tabs li,
.species-profile .tab-group .display,
.species-profile .tab-group .display .panel,
.species-profile .tab-group .display .heading-two { margin-top: 0; }

/* --- mobile-first tabs overrides ---*/
/* make each tab full width (!important to override JS set inline style) */
.species-profile .tab-group .tabs li { width: 100% !important; }
/* apply a top border to all anchors, matching .tabs border */
.species-profile .tab-group .tabs a {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* remove top border from first anchor */
.species-profile .tab-group .tabs li:first-child a {
  border-top: none;
}

/* letter dates */
.species-profile #letters th:nth-of-type(1),
.species-profile #letters td:nth-of-type(1) {
  width: calc(100% / 3);
}
/* letter description */
.species-profile #letters th:nth-of-type(2),
.species-profile #letters td:nth-of-type(2) {
  width: calc(100% / 3 * 2);
}



/* --- media queries --- */
@media (min-width: 30em) {
  .secondary-info {
    /* display .species-photo and .species-facts side by side */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }

  .species-photo {
    /* 1px gap to right */
    margin-right: 1px;
  }
  /* 1:1 aspect ratio */
  .species-photo::before {
    padding-top: 100%;
  }

  /* reassign image size */
  .species-gallery img.wide { max-height: 10rem; }
  .species-gallery img.tall { max-width: 10rem;  }

  /* revert mobile-first tabs overrides (!important to override JS set inline style) */
  .species-primary .tab-group .tabs li { width: 20% !important; }
  .species-primary .tab-group .tabs a { border-top: none; }
}



@media (min-width: 40em) {
  /* hide .secondary-title */
  .secondary-title { display: none; }
  /* show .primary-title */
  .primary-title { display: inherit; }

  .species-profile {
    /* display .species-primary and .species-secondary side by side */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .species-profile .content {
    /* increase content padding */
    padding: 2.5rem;
  }

  .species-primary {
    /* display .species-primary 2x as wide as .species-secondary */
    -webkit-box-flex: 2;
    -webkit-flex: 2;
        -ms-flex: 2;
            flex: 2;
  }

  .species-secondary {
    /* arrange .species-secondary to come after .species-primary */
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    /* remove previously set padding */
    padding: 0;
  }

  .secondary-info {
    /* display .species-photo and .species-facts stacked on top */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .species-gallery .frame {
    border-bottom: 1px solid white;
    /* caps flex-basis to 50% of parent (two per line) */
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 50%;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
  }
  /* remove right border from right-most elements */
  .species-gallery .frame:nth-of-type(even) {
    border-right: none;
  }

  /* reassign image size */
  .species-gallery img.wide { max-height: 8rem; }
  .species-gallery img.tall { max-width: 8rem;  }

  /* add previously removed margin */
  .species-intro { margin-top: 1rem; }

  /* remove previously set margins */
  .species-photo { margin: 0; }
}



@media (min-width: 50em) {
  .species-primary {
    /* display .species-primary 3x as wide as .species-secondary */
    -webkit-box-flex: 3;
    -webkit-flex: 3;
        -ms-flex: 3;
            flex: 3;
  }

  /* visually deter click interactivity */
  .species-fact .fact-heading {
    padding-bottom: 0.25rem;
    cursor: default;
  }
  /* hide down arrow icons */
  .species-fact .fact-heading::after { display: none; }
  /* expand fact text */
  .species-fact .fact-text {
    max-height: 30rem;
    padding-bottom: 0.875rem !important;
  }

  /* reassign image size */
  .species-gallery img.wide { max-height: 7rem; }
  .species-gallery img.tall { max-width: 7rem;  }
}