/* ============== 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.
  */
body {
  font-family: Georgia, serif;
	font-size: 1em;
	line-height: 1.5;
}

/* Do I need this still? Firefox does nested quotes fine.
These two have the same result:
q, blockquote {quotes: '“' '”' '‘' '’';}
q, blockquote {quotes: "\201C" "\201D" "\2018" "\2019";}
*/

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

/* remove all margins that push apart the layout components */
#banner h1 {margin: 0;}
#mainhead h1 {margin-top: 0;}
#mainhead h2 {margin-bottom: 0;}
#core dl {margin-top: 0;}
/* margin-top of first p and margin-bottom of last p  */
/* Will not change the default margins; and use the gaps for layout:
#mainfoot p:first-child {margin-top: 0;} 
#mainfoot p:last-child {margin-bottom: 0;}
#pagefoot p:first-child {margin-top: 0;}
*/

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 */
#gallery, 
#mainhead, 
#core, 
main aside, 
#mainfoot, 
#mainnav, 
ul.utility,
ul.utility li a {
	box-sizing: border-box;
}
main 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 ============== */

#site {/* DIV wrapper of all page content */
  position: relative;
  margin: 0 auto;
  max-width: 970px; /* home pages were 970px  */
}

main {
  position: relative;
	overflow: auto; /* contains the floated section and aside; 
	alternative is to add content after the aside and use clear:both;
  Or add to main element:  class="clearfix"
  */
	padding: 0 0 2% 3%; 
}

#homepic, #featurepage, #featurepic {
  float: right;
}
section {
  max-width: 500px;
}

#home footer {
	padding: 0 0 3% 3%;
}

/* ============== banner Header - see also media queries ============== */

#banner img {
	margin: 1% 2%;
}
#banner address {
  margin: 1% 2%;
  font-style: normal;
  line-height: 1.2;
  font-size: 1em;
}

#banner h1 {
  font-size: 2em;
  margin: 0;
  /* padding: 0 2%; */
 	padding: 0 0 0 2%;
}
/* subtitle: */
#banner p {
  font-size: 1em;
  line-height: 1.4;
  margin: 0;
  padding: 0 2% 0.1em;
  font-weight: bold;
}

/* ============== Media queries ==============  */

@media only screen and (max-width: 640px) { /* NOTE = a MAX-width */
  html { font-size: 90%; }

}

/* ========= Mobile FIRST======== */
/* phone styles [no @media rule] */

  #banner {
    display: flex;
    flex-flow: row nowrap;
  }
  #banner div {
    flex: 1 1 auto;
  }


@media screen and (min-width: 485px) {
/* start of medium tablet styles - and larger devices */

  #homepic, #featurepage, #featurepic {
    max-width: 50%;
    padding: 0;
    margin: 0 0 0 2%;
	}/* display: block;     */

}

@media screen and (min-width: 770px) {
/* start of large tablet styles - and larger devices */

	#banner h1 {
    font-size: 3em;
  }
  #banner p {
    font-size: 1.3em;
  }
  #banner address {
    font-size: 1.2em;
    text-align: right;
  }

}

@media screen and (min-width: 900px) {
/* start of desktop styles == 992px */
/* adjust this to where Grid 3 columns starts working */



}

/* ============== Set Color and style Variables ============== 
  See separate file that explain this color palette 
  Variables not supported by Internet Explorer v.11 (2013).
  In HTML, :root represents the <html> element
    and is identical to the selector html, 
    except that its specificity is higher. */
:root {
  --bodytext: #222;
  --body-a-link: #22d; /* = AAA-passed blue; or can be AAA-passed #22a; indigo */
  --body-a-hover: #c00; /* = AAA-passed red; or #812 burgundy */
  --body-a-visited: #80b; /* = AAA-passed purple; #306; standard purple */
  --main-background: white; /* also breadcrumb background, nav link hover background color */
  --main-box-shadow: rgba(0,0,0,0.2);
  
  --a1: #62583C;
  --a2: #827A66;
  --a3: #715D29;
  --a4: #EEE3C6;
  --a5: #EEE9DB;
  --b1: #ACA97C;
  --b2: #828066;
  --b3: #615D19;
  --b4: #EEECC6;
  --b5: #EEEDDB;
  --c1: #AC917C;
  --c2: #827266;
  --c3: #714929;
  --c4: #EED8C6;
  --c5: #EEE4DB;
  
  --bannerpic: url(../img/triccali970p.jpg);
}
/* =================== palette =================== */

html { 
	color: var(--bodytext);
	background: var(--a5);
}

h1, h3, h5 {
	color: var(--a1);
}
h2, h4, h6 {
	color: var(--a3);
}

a, a:link {
  color: var(--body-a-link);
  text-decoration: none;
  transition: all 0.3s ease;
}
#banner, #banner a {
	color: var(--a1);
}
#banner a:hover, #banner a:focus, #banner a:active {
  color: var(--body-a-hover);
}
html body a:hover, html body a:focus, html body a:active {
color: var(--body-a-hover);
} /* using html body will overide the a:link, a:visited styles */

section a:visited {
  color: var(--body-a-visited);
}
section a:link, section a:visited {
	text-decoration: none; 
	padding-bottom: 1px; 
	border-bottom: 1px dotted;
}/*border color inherited, and the dotted focus box overlaps it. */

main { box-shadow: 0 1px 0 rgba(0,0,0,0.2);
	background: #fff;
/* padding-bottom: 1em; without padding here the lowermost contained element's bottom margin is ignored */
	border-bottom-left-radius: 2em;
}

main footer, #pagefoot {color: var(--a1);}

#banner {
  color: var(--a1);
	border-top: 1px solid var(--a2);
	border-bottom: 1px solid var(--a2);
  background: var(--a4) var(--bannerpic) left top no-repeat;
  background-size: cover;
  background-position: top center; 
}

#homepic, #featurepage, #featurepic {
	border: 4px solid var(--c4);
}