/* ============== Set style Variables ============== */
:root {
  --arrow-right: url(/guide/assets/images/arrow.gif);
  --arrow-down: url(/guide/assets/images/arrowdn.gif);
}
/* ============== Basics ============== */

/* ==== Establish styles not addressed by Normalize or Boilerplate ==== */

/* ----Browser defaults for elements
---FIGURE
    display: block;
    margin: 1em 40px;
---FIGCAPTION
    display: block;
---BLOCKQUOTE
    display: block;
    margin: 1em 40px;
---P
    display: block;
    margin: 1em 0;
-------------------------------- */
figure {
  display: block;
  margin: 0;
} /* where needed change to: display: inline-block; */
figcaption {
  display: block;
  /* Default = left. text-align: center; */
}
blockquote {
  display: block;
  margin: 0;
}

/* Boilerplate == html {color: #222;font-size: 1em;line-height: 1.4;}  */
  /* body text == font-family: Georgia, serif; 
  font-weight: 300 or 600 or 700 does not work -- default system Georgia only has regular and bold.
  2020: less than 600 = normal; 600 or 700 = bold.
*/

html {
    font-family:  Georgia, serif;
    font-size: 1em;
    line-height: 1.5;
    direction: ltr;
}/* 1em = 16px ; Chrome's default font-size is/was 12px ? */


i {
  font-style: italic;
}/* scientific names */


/* ============== Prep elements for LAYOUT ============== */

nav ul, nav ol {
  list-style:none;
  list-style-image:none;
  margin: 0;
  padding: 0;
}


/* box for layout elements -- can use padding and borders.
Remember MARGINS are OUTSIDE the box width */
/*  #site (contains everything) and main (contains CSS Grid) are NOT border-box because I am relying on set width (inside border or padding). */
/* Note: #asides may contain more than one aside element */

#mainpic, 
#mainpics, 
#mainhead, 
#pagecore, 
#taxoncomps, 
#taxoninfo, 
#pageside1, 
#pageside2, 
#mainfoot, 
ul.utility, 
ul.utility li a {
	box-sizing: border-box;
}
img { 
  box-sizing: content-box;
	max-width: 100%; /* images will shrink to fit their container width 
	(but border and padding are included in this width), 
  but will not get bigger than their full size */
  height: 100%;
  /* 
  use 100% for height instead to fix Chrome bug. Because "auto" does not work in Chrome (2018)
  height: auto !important;
  */
}

/* ============== Primary LAYOUT ============== */


/* ============== temp coloring for testing ====+====  border: 5px solid black;  
#taxon {background-color: gray; }
#site {background-color: white; }
#breadcrumb {background-color: #f6f; }
#banner {background-color: #f63; }
#sitenav {background-color: #fbf; }
main {background-color: yellow; }
#pageside1 {background-color: #afa; }
#mainpic {background-color: pink; }
#mainpics {background-color: pink; }
#mainhead {background-color: teal; }
#taxoncomps {background-color: #bbb; }
#taxoninfo  {background-color: #ddd; }
#pageside2 {background-color: #fbb; }
#mainfoot {background-color: #cff; }
#pagefoot {background-color: lime; }
*/



#site {/* DIV wrapper of all page content */
  position: relative;
  margin: 0 auto;
  max-width: 61.6rem;
}

main {
	padding: 1.5rem 1rem 1rem; 
}
/* 
top margin (padding) controlled by #breadcrumb above.
Right padding removed for some 3 column layouts.
 */

 
/* ======== Breadcrumb, Banner Header, Primary Nav  ======= */
/* link animation is in the palette CSS  */
 
#breadcrumb {
	padding: 0.3rem 1.4rem;
	font-size: 0.8rem; /* 0.9em  */
  line-height: 1.8rem; /* for mobile view separation of links in lines; TEST THIS */
}
 
#banner form {
	padding: 0.5rem 1rem 0.5rem 0.75rem;
}
#banner input[type="search"] { /* this is smaller smartphone size */
	width: 10rem; 
	font-size: 1rem;   /* changed here for smart phones */
}
#banner .homelink {
  /* media query at larger size == font-size: 2.5em; */
  margin:0;
  padding: 0.8rem 0 1.1rem 1rem;
  font-size: 1.5rem;
  font-weight: bold;
	line-height: 1.8rem;
}
 /* moved from mobile first media query */
#banner {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
banner .homelink {
    order: -1;
}
 
 
/* Primary Menu */
nav#sitenav {
	text-transform: uppercase; 
	font-size: 0.8rem;
	letter-spacing: 0.1rem;
}
nav#sitenav ul {
	line-height: 1.62rem;
	margin: 0;
	padding: 0;
  display: flex;
  flex-flow: row wrap;
}
nav#sitenav li {
  flex: auto; /* distributes extra space inside of items, makes it look okay when responsive */
}
nav#sitenav a  {
	display: block; /* need this for the line-height to take effect, also they fill the LI item space */
	padding: 0.2rem 0.5rem 0;
  text-align: center;
}
nav#sitenav li.isOpen a {
  font-weight:700;
}
nav#sitenav .home a { 
  /* previously was = width: 21px; */
  min-width: 2.9rem;
}

/* ============== TOP IMAGE(S) ============== */
/* see media queries for sizing of images */
/* inline-block elements do not have their adjacent margins collapse */
/* Changed this #top-pics for multiple imgs, and #top-pic for single img.*/
#mainpic img {
	display: block;
	margin: 0;
  height: auto !important; /* needed to prevent vertical stretching */
}
#mainpics { /* FLEX gets rid of white space between images  */
  margin: 0;
  display: flex;
  flex-flow: row wrap;
}
#mainpics img {
	display: block;
	/* max-width: 98%; images with margin-right of 2% will not push out of their narrow container. */
	margin: 0 1rem 0 0;
  height: auto !important; /* needed to prevent vertical stretching */
}
#mainpics > :last-child {
    margin-right: 0;
}

/* ============== MAIN HEADER ============== */
#mainhead {

}
/* Note: line-height of 1em does not include the descenders: g j p q y  */

#mainhead h1 { /* see if this works for all page types: margin: 0; == no, doesn't work when no image above H1  */
  margin: 1rem 0 0 0;
	line-height: 1.5rem;

}
/* NOTE: there may be a bigger gap between header#banner and section#core if #core is not tallest column in the grid. 
      Also paragraphs have a top margin and will thus make a gap if the first element in the #core.
*/


/* ============== Aside #pageside1 ============== */
/* ======== secondary navigation [pageside1]) ========= */

#pageside1 {max-width: 21rem;} /* for phones */

#pagemenu {}

#pageside1 nav {
	margin: 0 0 2em;
}
#pageside1 nav li {
  padding-left: 0.3rem;
}
#pageside1 nav a,
#pageside1 nav span {
  display: block;
  padding: 0.3rem 0.3rem 0.15rem 0.63rem;
}
#pageside1 nav li.depth-1>a,
#pageside1 nav li.depth-1>span { 
  font-weight: 700;
  text-transform: uppercase;
	letter-spacing: 0.1rem;
/*  padding-left: 15px; */
}
#pageside1 nav li.hasChildren:not(.depth-1) {
background-image: var(--arrow-right);
background-position: 0.2rem 0.75rem;  
background-repeat: no-repeat;
background-size: 0.38rem 0.56rem;
}
#pageside1 nav li.isOpen:not(.depth-1) {
background-image: var(--arrow-down);
background-position: 0.1rem 0.88rem;  
background-repeat: no-repeat;
background-size: 0.56rem 0.38rem;
}


/* ============== #pageside1  Similar Taxa ============== */

#taxaside p {
  padding: 0 5px;
}
#taxaside figure {
  margin: 0;
  padding-bottom: 2rem;
}
#taxaside figcaption {
  text-align: center;
  line-height: 1.3rem;
	font-size: 0.9rem;
}



/* ============== Content Elements ============== */


main #core p, 
main #core ul, 
main #core ol, 
main #core dl,
#taxoncomps p,
#taxoninfo p,
#taxoninfo ul,
#taxoninfo ol
 {
      max-width: 35em;
} /* max line length 75 characters; use em so it is relative to that text (not rem) */




/* expanding DETAILS element(s) */
details summary {
  background-color: #eee;
  border: 1px solid #ccc;
  padding-left: 1rem;
}
details summary { /* do not use :hover */
  cursor: pointer; /* pointer = Hand */
}
details summary h3 {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: bold;
  line-height: 2rem;
  font-size: 1rem;
}

/* ------ MAIN FOOTER #mainfoot ------- */
#mainfoot {

}
.pagecite { /* paragraph */
  margin: 0;
	font-size: 0.9rem;
  padding-top: 1rem;
}

.pagemeta { }
.prevnext { }





/* ============== Aside #pageside2 ============== */
/* aside - See media queries for width */

#pageside2 {
	padding-top: 2rem;
} /* was margin before */




#pageside2 .box {
  width: 200px;
  position: relative; 
  left: 1rem; /* move box to the right over matching 1em padding inside Main */
	border: 2px solid #ccc;
	margin: 1.25rem 0;
}
#pageside2 .box figcaption {
	margin: .6rem;
  font-weight: bold;
}
#pageside2 .box p {
	font-size: 0.9rem;
  margin:  0.5rem 1rem;
}
/* is this needed ? ---------- 
#pageside2 img {
    box-sizing: content-box;
    width: auto;
    height: auto;
}
*/


/* ============== page Footer ============== */
#pagefoot {
	margin: 0 1.25rem 2.5rem 3.76rem;
	font-size: 0.9rem;
}
p.utility {
	line-height: 2;
}



/* ============== Specific page styles ============== */

/* -----page title ----- */
#taxon #mainhead h1 {/* resize for taxon names */
	font-size: 1.8rem; 
}
#taxon #mainhead p {/*  second line  */
	font-size: 1.2rem; 
  margin: 0.5rem 0 1rem;
	line-height: 1.5rem;
  font-weight: 700;
}
#taxon h1 span.author {
    font-size: 1rem;
}
#taxon h2 {
  margin: 0.8rem 0 1rem;
}

/* <span class="author"></span> <span class="year"></span> */
h3 span.author, h3 span.year {
   font-size: 1rem;
   font-weight: 400;
}

/* ----- Taxon Info ----- */

#taxoninfo ol,
#taxoninfo ul {
  margin-left: 0;
  padding-left: 1.3em;
}
#taxoninfo ol li {
    padding-bottom: 0.3rem;
}


/* ----- Page Details ----- */
.nomen > :first-child {
  margin-top: 1em;
}
.nomen ul {
  list-style:none;
  margin: 0;
  padding: 0;
}
.nomen li {
  margin: 0.5rem 0;
}

.pagedetails h4 {
  margin: 1rem 0;
}
.pagedetails h4::after, .pagedetails h5::after {
  content: ":";
}
.pagedetails h5 {
  font-size: 1rem;
  margin: 0;
  clear: left;
	float: left;
	padding: 0 1em 0 0;
}


/* Taxa pages - Ordered lists */

/* Taxa pages - Lists */
#taxoncomps ol {
  list-style:none;
  margin: 0;
  padding: 0;
}
#taxoncomps li {
   margin: 1rem 0;
}
#taxoncomps h3 {
   margin: 0 0 0.5rem;
}
#taxoncomps article p {
  margin-top: 0.2rem;
}
.taxphotos figure {
  max-width: 300px;
  margin-bottom: 1rem;
}
.taxphotos figcaption {
  text-align: center;
  line-height: 1.3rem;
}






 /* ===========Set All Grid Areas ============== */
 
#mainpic, #mainpics {grid-area: mainpic;}
#mainhead {grid-area: mainhead;}
#pagecore {grid-area: pagecore;}
#mainfoot {grid-area: mainfoot;}

#pageside1 {grid-area: pageside1;}
#pageside2 {grid-area: pageside2;}

#taxoncomps {grid-area: taxoncomps;}
#taxoninfo {grid-area: taxoninfo;}
 
 
 
 
 /* ========= Mobile FIRST======== */
 /* ======== MEDIA QUERIES ============== */
/*   "only" blocks older browsers  ; Use em for size test */
@media only screen and (max-width: 40em) { /* NOTE = a MAX-width */
/* from Kirby site -- test this, Rocky says text size is perfect on his phone */
  html { font-size: 90%; }
  
}

    /* wider phone -- give bigger banner text */
@media only screen and (min-width: 30em) {

	#banner .homelink {
    font-size: 2.5rem;
  }
  #banner input[type="search"] {
    width: 13rem; 
    font-size: 1.1rem;  
    padding: 0.1rem 0.3rem;
    border-radius: 0.3rem;
  }



 }
 
   /* Tablet -- this is where Grid 2 columns starts working */
@media only screen and (min-width: 40em) and (max-width: 55.99em) {


#banner .homelink {
  padding-left: 2rem;
}

  main {
    display: grid;
    grid-template-rows: auto;
    grid-column-gap: 1.3rem;
    grid-row-gap: 1rem;
  }

  main { /*  DEFAULT adjust column widths later */
    grid-template-columns: 12rem auto;
    grid-template-areas:
      "mainpic mainpic"
      "mainhead mainhead"
      "pageside1 pagecore"
      "pageside2 pageside2";
      "mainfoot mainfoot";
  }
  
    #taxon.species main {
    grid-template-columns: 13.5rem auto;
    grid-template-areas: 
      "mainpic mainpic"
      "mainhead mainhead"
      "pageside1 pagecore"
      "pageside2 pageside2";
      "mainfoot mainfoot";
  }

  main#taxoncomp {
    /* the new thumbnail images in right column are 300 x 150 px but can use 200px wide */
    grid-template-columns: 13rem auto;
    grid-template-areas:
      "mainpic mainpic"
      "mainhead mainhead"
      "pageside1 taxoncomps"
      "pageside1 taxoninfo "
      "pageside2 pageside2"
      "mainfoot mainfoot";
  }
  
  #mainhead {
    text-align: center;
  }
  
  #pageside1 nav {
    margin: 0 0 5em;
  }
  
  
}
 
 
 
 
 
 
 
 
 
 
/* Desktop -- this is where Grid 3 columns starts working */
@media only screen and (min-width: 56em) {

#banner .homelink {
  padding-left: 3rem;
}

  main {
    display: grid;
    grid-template-rows: auto;
    grid-column-gap: 1.3rem;
    grid-row-gap: 1rem;
  }

  main { /*  DEFAULT adjust column widths later */
    grid-template-columns: 12rem auto 304px;
    grid-template-areas:
      "mainpic mainpic pageside2"
      "pageside1 mainhead pageside2"
      "pageside1 pagecore pageside2"
      "pageside1 mainfoot pageside2";
  }
  
  #taxon main {
    grid-template-columns: 13.5rem auto 200px;
    grid-template-areas: 
      "mainpic mainpic pageside2"
      "pageside1 mainhead pageside2"
      "pageside1 pagecore pageside2"
      "pageside1 mainfoot pageside2";
  }
    #taxon.species main {
    grid-template-columns: 13.5rem auto 200px;
    grid-template-areas: 
      "mainpic mainpic mainpic"
      "pageside1 mainhead mainhead"
      "pageside1 pagecore pageside2"
      "pageside1 mainfoot pageside2";
  }
  
  main#taxoncomp {
    /* the new thumbnail images in right column are 300 x 150 px but can use 200px wide
          The Box figures have borders so they are 204px wide */
    grid-template-columns: 13rem auto 204px;
    grid-template-areas:
      "pageside1 mainpic mainpic"
      "pageside1 mainhead mainhead"
      "pageside1 taxoncomps taxoncomps"
      "pageside1 taxoninfo pageside2"
      "pageside1 mainfoot pageside2";
  }

  ol.taxcomp article {grid-area: a;}
  ol.taxcomp .taxphotos {grid-area: b;}

  ol.taxcomp li {
    display: grid;
    grid-template-areas:
      "a b";
    grid-column-gap: 1.3rem;
  }
    /* 
    ol.taxcomp img {
       height: auto;
    }
    */

      #pageside1 nav {
    margin: 0 0 5em;
  }
  
}