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

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 */

/* = = = = CONTENTS = = = =
0. Custom CSS  
1. Universal & Shared Rules
    - Page & section layouts
    - Images
    - Typography
    - Link styling
    - Navbar
    - Footer
2. Home Page
    - Header
    - Piano section
    - Credits section
3. Tickets Page
    - Details
    - Find us
4. Keaton Page
    - Header
    - Blockquote
5. Error Page

6. Media Queries
    - 700px
    - 960px
    - 1120px

/* = = = = 0. CUSTOM CSS = = = =  */
:root {
    --colour-cream: #f3dfc0;
    --colour-blue: #0e627f;
    --colour-red: #ba2c32;
    --drop-shadow: drop-shadow(0.2em 0.2em 0.3em #083a4c);
}

/* = = = = 1. UNIVERSAL & SHARED RULES = = = =  */
body {
    box-sizing: border-box;
    color: #000;
    background-color: var(--colour-cream);
    font-size: 1.3em;
    line-height: 1.5;
    font-family: 'Josefin Sans', 'Gill Sans', Helvetica, Arial, Verdana, Tahoma, sans-serif;
}

/* PAGE & SECTION LAYOUTS */
/* all headers */
header {
    margin-bottom: 2em;
}

/* headers for Tickets page & Keaton page */
.tickets header, .keaton header {
    color: var(--colour-cream);
    background-color: var(--colour-red);
    width: 100vw;
    padding: 1em 0;
}

/* Home page piano section & Tickets page About the Electic section */
.home section:nth-of-type(2), .tickets section:last-of-type {
    color: var(--colour-cream);
    background-color: var(--colour-blue);
    width: 100vw;
    margin: 2em 0;
    padding-bottom: 1.8em;
}

/* Home page credits details & Ticket page screening details */
.home section:last-of-type, 
.tickets section:first-of-type {
    width: 70%;
    max-width: 600px;
    margin: 2.5em auto;
    border: 2em solid transparent;
    border-image: url(images/border.svg) 25% stretch;
}

/* IMAGES */
/* all header & section images */
header img, div img, iframe, blockquote + img {
    display: block;
    margin: 0 auto;
    width: 75%;
    max-width: 600px;
    height: auto;
    padding: 1em;
}

/* large full-width pictures on Home page & Keaton page */
.home main > img, .keaton figure img {
    display: block;
    width: 100vw;
    height: auto;
    padding-top: 1em;
}

/* CTA ticket links & images for Home page & Tickets page */
.home section:nth-of-type(2) a:link, .home section:nth-of-type(2) a:visited,
.tickets section:first-of-type a:link, .tickets section:first-of-type a:visited {
    display: block;
    width: 5em;
    text-align: center;
    margin: 1.5em auto;
    padding: 0.8em;
    box-shadow: 5px 5px 10px #083a4c;
    border-radius: 25px;
}

/* button effect for Homepage piano section CTA */
.home section:nth-of-type(2) a:link, .home section:nth-of-type(2) a:visited {
    background-color: var(--colour-cream);
}

/* button effect for Tickets details section CTA */
.tickets section:first-of-type a:link, .tickets section:first-of-type a:visited {
    background-color: var(--colour-blue);
}

section a:link img, section a:visited img {
    display: block;
    margin: 0 auto;
    filter: var(--drop-shadow);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

/* rotate the ticket icons on hover */
section a:link img:hover, section a:visited img:hover {
    transform: rotate(-20deg);
}

/* TYPOGRAPHY */
/* aligning headings */
h1, h2, h3, .home header p {
    text-align: center;
    margin: 0 auto;
    padding: 0.1em;
}

/* extra bit of padding for main h2s */
main h2 {
    padding: 1em 0 0;
    max-width: 75%;
}

/* aligning paras */ 
.home main p, header p, .tickets section p, .keaton section p  {
    width: 75%;
    max-width: 600px;
    margin: 1.1em auto;
}

/* Home page main intro text & Keaton page figcaption */
.home main > p, figcaption {
    margin: 1em auto;
    line-height: 1.2;
    padding-bottom: 1em;
    width: 75%;
    max-width: 900px;
}

/* fonts */
.home header span:last-of-type, .home header h2, .tickets h1, .keaton h1, h2, blockquote {
    font-family: 'Poiret One', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
}

/* font sizes */
.home header span:last-of-type, .tickets h1, .keaton h1 {
    font-size: 1.6em;
    font-size: calc(1.6em + 1.2vw);
}

h2 {
    font-size: 1.4em;
    font-size: calc(1.4em + 1.2vw);
}

h3 {
    font-size: 1.2em;
    font-size: calc(1.2em + 1.1vw);
    margin-top: 1.2em;
}

a {
    font-size:  calc(1.3em + 0.3vw);
}

/* superscript for dates th */
sup {
    vertical-align: super;
    font-size: smaller;
}

blockquote {
    font-size: 1.3em;
}

/* font colours */
.home h1,
.home section:first-of-type h2,
.home section:last-of-type h2, 
.tickets section:first-of-type h2,
.tickets section:nth-of-type(2) h2, 
.keaton h2, a:link, a:visited {
    color: var(--colour-blue);
}

.home header p, h3, footer p {
    color: var(--colour-red);
}

/* LINK STYLING */
a:link, a:visited {
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

a:hover {
    color: #000;
    text-decoration: underline 2px solid;
}

a:active, a:focus {
    color: var(--colour-red);
}

/* different color scheme for Tickets page details section link for better contrast against blue bg */
.tickets section:first-of-type a:link, .tickets section:first-of-type a:visited {
    color: var(--colour-cream);
} 

.tickets section:first-of-type a:hover {
    color: #fff;
}

.tickets section:first-of-type a:active, .tickets section:first-of-type a:focus {
color: #ffdd00;
}

/* NAVBAR */
nav[aria-label="Primary"] ul {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
}

/* aligning the links */
nav[aria-label="Primary"] ul li a:link, nav[aria-label="Primary"] ul li a:visited  {
    display: block;
    text-align: center;
    padding: 0.6em;
    text-decoration: none;
}

/* nav wheel icons */
nav[aria-label="Primary"] ul li a:link img, nav[aria-label="Primary"] ul li a:visited img {
    display: block;
    width: 2.5em;
    margin: 0 auto;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

/* spin hover animation for nav icons */
nav[aria-label="Primary"] ul li a:link img:hover, nav[aria-label="Primary"] ul li a:visited img:hover {
    transform: rotate(-360deg);
}

/* FOOTER */
footer {
    padding: 0.5em;
}

footer a:link, footer a:visited {
    text-decoration: underline;
}

/* footer navigation */
nav[aria-label="Footer navigation"] ul {
    display: flex;
    justify-content: center;
    border-top: 4px solid #d6982c;
}

nav[aria-label="Footer navigation"] ul li {
    padding: 0.7em;
}

/* footer coursework link and copyright */
footer > a, footer p {
    display: block;
    text-align: center;
    font-size: 1em;
}

footer p:last-child {
    padding-top: 1em;
    font-size: 0.8em;
}

/* = = = = 2. HOME PAGE = = = =  */
/* HEADER */
.home header h2 {
    text-transform: uppercase;
}

/* span for 'in' */
span:first-of-type {
    display: block;
    font-family: 'Josefin Sans', 'Gill Sans', Helvetica, Arial, Verdana, Tahoma, sans-serif;
    font-size: 0.8em;
    transform: rotate(-40deg);
    text-transform: lowercase;
}

/* span for 'The General' */
span:last-of-type {
    text-decoration: underline 4px #0e627f;
}

/* PIANO SECTION */
/* shadow for piano img */
.home section:nth-of-type(2) div img {
    filter: var(--drop-shadow);
}

/* CREDITS SECTION */
/* centering & adding some padding to the credits */
section ul li {
    text-align: center;
    padding: 0.5em 0;
}

section ul li {
    text-align: center;
}

/* = = = = 3. TICKETS PAGE = = = =  */
/* DETAILS */
/* centering the showing time and price  */
.tickets h3 + p {
    text-align: center;
}

/* FIND US */
/* aligning the address */
address {
    text-align: center;
    margin: 1em auto;
}

/* extending the <a> width for tel number */
section address a:link, section address a:visited {
    width: 7em;
}

/* = = = = 4. KEATON PAGE = = = =  */
/* HEADER IMAGE */
/* adding some shadow to the hat img */
.keaton header img {
    filter: var(--drop-shadow);
}

/* BLOCKQUOTE */
/* blockquote styling adapted from Webmaster-Source tutorial (https://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/) */
blockquote {
    font-style: italic;
    width: 65%;
    max-width: 600px;
    margin: 1em auto;
    padding: 0.3em 2.3em;
    line-height: 1.2;
    position: relative;
    color: var(--colour-blue);
}

blockquote:before, cite {
    color: var(--colour-red);
}

blockquote:before {
    font-family: Georgia, serif;
    display: block;
    padding-left: 0.2em;
    content: "\201C";
    font-size: 3.5em;
    position: absolute;
    left: -0.25em;
    top: -0.25em;
}

blockquote cite {
    font-style: normal;
    display: block;
    margin-top: 0.25em;
}

blockquote cite:before {
    content: "\2014 \2009";
}

/* = = = = 5. ERROR PAGE = = = =  */
/* setting the text */
.error {
    color: var(--colour-blue);
    text-align: center;
}

.error h1 {
    font-family: 'Poiret One', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    font-size: 2em;
    margin: 0.5em 0 1em;
}

.error p {
    font-size: 1.3em;
}

/* homepage link */
.error a:link, .error a:visited {
    display: block;
    font-size: 1.3em;
    color: var(--colour-red);
    margin-bottom: 1em;
}

/* error image size */
.error img {
    width: 75%;
}

/* = = = = 6. MEDIA QUERIES = = = =  */
/* 700px */
/* placing the Keaton page blockquote & image side by side */
@media (min-width: 700px) {
    .keaton div {
        display: flex;
        align-items: center;
        width: 75%;
        max-width: 750px;
        margin: 0 auto;
    }  

    .keaton div img {
        width: 40%;
    }
}

/* 960px */
/* reducing the size of the full-screen imgs */
@media (min-width: 960px) {
    .home main > img, .keaton figure img {
        margin: 0 auto;
        width: 75%;
        max-width: 900px;
        height: auto;
    }

    /* reducing the size of the Error page image */
    .error img {
        width: 35%;
    }
}

/* 1120px */
/* FLEX FOR HOME PAGE STORYLINE, PIANO & TICKETS PAGE ABOUT THE ELECTRIC SECTIONS */
/* placing the imgs & paras side by side */
@media (min-width: 1120px) {
    .home section:first-of-type div, 
    .home section:nth-of-type(2) div:first-of-type, 
    .tickets section:last-of-type div:first-of-type {
        display: flex;
        align-items: center;
        width: 75%;
        margin: 0 auto;
    }

    /* stacking the paras */
    .home section:nth-of-type(2) div div, .tickets div div {
        flex-direction: column;
    }

    /* GRIDS FOR HOME PAGE CREDIT SECTION & TICKET PAGE SCREENING INFO */
    /* setting up the grids */
    .home section:last-of-type, .tickets section:first-of-type {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5em;
    }

    /* placing the section headings */
    .home section:last-of-type h2, .tickets section:first-of-type h2 {
        grid-area: 1 / 1 / 2 / 3;
    }

    /* placing the Tickets page ticket img link */
    .tickets section a:link, .tickets section a:visited {
        grid-area: 3 / 1 / 4 / 3;
    }
}