/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* = = = = END OF RESET = = = = */

/* + + + + + + + + RULES FOR ALL PAGES + + + + + + + + */

body {
    box-sizing: border-box;
    background-color: #d1d0cf;
    font-family: Inconsolata, Monaco, 'Courier New', Courier, monospace;
    font-size: 1.4em;
    line-height: 1.6;
}

/* nav menu */

/* style the hamburger */
nav label {
    display: inline-block;
    color: #d1d0cf;
    background: #f75a00;
    font-size: 2em;
    padding: 8px;
}

/* hide the checkbox */
#hamburger {
    display: none;
}

/* keep the nav items hidden  */
ul { 
    display: none; 
}

/* display the nav items when burger is clicked */
nav input:checked ~ ul { 
    display: block;
    text-align: center;
    font-size: 1.4em;
}

/* colours, fonts, margins, padding, alignment */
h1, h3, .dropcap {
    font-family: 'Allerta Stencil', Helvetica, Arial, Tahoma, Verdana, sans-serif;
    font-weight: 600;
    color: #f75a00;
}

h1, h2, h3, footer {
    text-align: center;
}

h1 {
    font-size: 1.5em;
    font-size: calc(1.5em + .8vw);
    margin-top: 1em;
}

h2 {
    font-size: calc(1.4em + .8vw);
    font-weight: 600;
    margin-top: 0.3em;
}

h3 {
    font-size: calc(1.4em + .8vw);
    padding: 1em 1em 0;
    font-weight: 600;
}

.excerpt main, .design main, article {
    width: 97%;
    margin: 2em auto;
    background-color: #f3ede4;
	outline: 4px dashed black;
}

aside, figure, footer {
    padding: 0.5em;
}

footer {
    margin-bottom: 1em;
}

/* link styling */
a {
    color: #f75a00;
}

a:link {
    text-decoration: none;
    border-bottom: 3px dashed;
}

a:visited {
    border-bottom: 3px dashed #858584;
}

a:hover, a:focus {
    background-color: #f3ede4;
}

a:active {
    border-bottom: 3px dashed #f75a00;
}

/* + + + + + + + + EXCERPT PAGE SPECIFICS + + + + + + + + */

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

/* setting flow-root to stop float collapse */
.excerpt main {
    display: flow-root;
}

/* clearing the floats to flow correctly */
.excerpt p {
    clear: right;
}

/* dialogue boxes */
.ma-speech, .renton-speech {
    padding: 1em;
}

.ma-speech {
    background-color: #d1d0cf;
    width: 50%;
    outline: 2px dashed #858584;
}

.renton-speech {
    width: 40%;
    background-color: #eeae8a;
    float: right;
    outline: 2px dashed #f75a00;
}

.renton-speech:last-of-type {
    width: 65%;
    float:none;
    margin: 0 auto 2.5em;
}

/* = = = = TYPOGRAPHY = = = = */

.excerpt p {
    margin: 1.4em 2em;
}

/* drop cap */
.dropcap {
    font-size: 3.5em;
    float: left;
    margin: 0.1em 0.1em 0;
    line-height: 1;
}

/* erase the extra margin with before and after */
.dropcap:before, .dropcap:after {
  content: "";
  display: block;
}

.dropcap:before {
  margin-top: -0.2em;
}

.dropcap:after {
  margin-bottom: -0.15em;
}
/* allow dropcap to be read as one word by screen readers */
.sr-only:not(:focus):not(:active) {
    clip: rect(0,0,0,0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }

/* + + + + + + + + CONTEXT PAGE & DESIGN PAGE SPECIFICS + + + + + + + + */

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

aside, figure {
	background-color: #eeae8a;
	outline: 4px dashed #f75a00;
    width: 85%;
    margin: 2em auto;
}

/* = = = = TYPOGRAPHY = = = =  */

.context p, .design p {
    margin: 0 1.4em;
    padding: 1em;
}

/* citations */
article p:last-of-type, aside p:last-of-type {
    font-size: 0.7em;
    font-style: italic;
}

article p:last-of-type a, aside p:last-of-type a {
    border-bottom: 1px solid black;
}

aside p:last-of-type a {
    color: black;
}

/* quote styling */
blockquote {
	font-style: italic;
}

figcaption {
    margin-left: 75%;
}

/* + + + + + + + + RESPONSIVE MEDIA QUERIES  + + + + + + + + */

/* = = = = FOR TABLETS, SMALLER LAPTOPS AND ABOVE = = = =  */
@media screen and (min-width:768px)  {

    /* removing hamburger menu */
    nav label { 
        display: none; 
    }
    /* ensuring flex nav kicks in regardless of hamburger checkbox state */
    nav input:checked ~ ul {
        display: flex;
        justify-content: center;
        font-size: 1.6em;
     }
    
    nav input:empty ~ ul {
        display: flex;
        justify-content: center;
        font-size: 1.6em;
    }
      
    nav ul li {
        padding: 1em 1.4em 0;
    }
    
    /* resize h1s */
    h1 {
        font-size: 4em;
    }

    /* resize container elements */
    .excerpt main, article, .design main {
        width: 70%;
    }

    aside, figure {
        width: 65%;
    }

}

/* = = = = FOR LARGER LAPTOPS, DESKTOPS = = = = */
@media screen and (min-width:1100px) {

    /* resize final dialogue box */
   .renton-speech:last-of-type {
    width: 60%;
    text-align: center;
   }

    /* turn the Context Page into a grid */
    .context main {
        width: 80%;
        margin: 1em auto;
        display: grid;
        grid: repeat(3, auto) / 55% 1fr;
        grid-column-gap: 5%;
    }

    article:first-of-type {
        grid-area: 1 / 1 / 3 / 2;
    }

    aside {
        grid-area: 1 / 2 / 2 / 3;
        align-self: start;
    }

    article:nth-of-type(2) {
        grid-area: 2 / 2 / 3 / 3;
        align-self: end;
    }

    figure {
        grid-area: 3 / 1 / 4 / 3;
        align-self: center;
    }

    article, aside, figure {
        width: auto;
    }

}