/* 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;
}
* {
	box-sizing: border-box;
}
/* ========== END OF RESET ==========  */

/* ========== TABLE OF CONTENTS ========== */

/*  
    1. ROOT OF DOCUMENT
    2. MAIN LAYOUT: BODY, FOOTER
    3. MOBILE FIRST MENU
    4. TYPOGRAPHY GENERAL RULES
    5. IMAGES GENERAL RULES 
    6. LINK STATES GENERAL RULES
    7. TRANSFORM GENERAL RULES
    8. TYPOGRAPHY SPECIFIC RULES
    9. COLOUR SPECIFIC RULES 
    10. CARD LAYOUT SPECIFIC RULES
    11. CTA 
    12. IMAGES SPECIFIC RULES
    13. SVG'S
    14. EMBEDDED ELEMENTS
    15. MEDIA QUERIES
  */

/* ========== TABLE OF CONTENTS END ========== */

/* ========== 1. ROOT OF DOCUMENT ========== */
:root {
    --off-white-colour: #f5f3f3;
    --green-bg-colour: #005938;
    --blue-bg-colour: #addef1;
    --blue-shadow: #92c3d6;
    --green-shadow: #01452c;
    --black-text-colour: #0e0e0e;
}

/* ========== 2. MAIN LAYOUT ========== */
/* BODY */
body {
    font-family: 'Source Sans Pro', 'Ebrima', 'Segoe UI', sans-serif;
    line-height: 1.3;
    color: var(--off-white-colour);
    background-color: var(--blue-bg-colour);
    margin: 0;
    padding: 0;
}
/* FOOTER  */
/* Design and position of footer */
footer {
    text-align: center;
    font-size: .9em;
    padding: 0 0 1.5em 0;
    color: var(--off-white-colour);
    background-color: var(--green-bg-colour);
}
/* Targets back to coursework link */
footer a {
    display: flex;
    justify-content: center;
    font-size: .9em;
}
/* Targets the footer info below navigation links */
footer>div {
    padding-top: 1em;
}
/* Footer Page Links */
nav[aria-label="secondary"]>ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    text-align: left;
}
/* Page link size and padding */
nav[aria-label="secondary"]>ul>li>a {
    padding: 1em;
    font-size: clamp(1em, 5vw, 25px);
}

/* ========== 3. MOBILE FIRST MENU ========== */
nav[aria-label="primary"] li a {
	display: block;
    padding: .9em;
	font-size: 1.2em;
	text-align: left;
    text-decoration: none;
    list-style-type: none;	
	/* background colour of menu dropdown */
	background-color: var(--off-white-colour);
	-webkit-transition: background-color .2s ease-in-out;  
	-moz-transition: background-color .2s ease-in-out;  
	-o-transition: background-color .2s ease-in-out;  
	transition: background-color .2s ease-in-out;
}
/* Text and background colour of mobile menu */
nav[aria-label="primary"] {
    color: var(--green-bg-colour);
    background-color: var(--off-white-colour);
}
/* Design/layout */
.toggle {
	display: inline-block;
	width: auto;
	position: relative;
	padding-bottom: 7px;
	font-size: 1.2em;
	line-height: 1;
    list-style-type: none;
}
/* Menu text */
.toggle>span {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--black-text-colour);
    padding-left: .1em;
    cursor: pointer;
}
/* Icon of umbrella open */
input[type="checkbox"] {
    content: url('images/umbrella-open.svg');
    display: inline-block;
    padding: .5em 0 0 .5em;
    margin: 0;
    width: 48px;
    height: auto;
    cursor: pointer;
}
/* Icon of umbrella closed when clicked */
input[type="checkbox"]:checked {
    content: url('images/umbrella-closed.svg');
}
/* Checkbox design - shows umbrella icon */
#menu-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* Shows/hides menu when clicked */
#menu-toggle + .toggle + ul {
	display: none;
}
/* Allows menu to be clicked to reveal dropdown links */
#menu-toggle:checked + .toggle + ul {
	display: block;
}
/* ========== 4. TYPOGRAPHY GENERAL RULES ========== */
/* Font for headings 1 and 2 */
h1, h2 {
    font-family: 'Caveat Brush', 'Ink Free Regular', 'Chiller Regular', cursive;
}
/* Headings 1-3 in center of page */
h1, h2, h3 {
    display: flex;
    justify-content: center;
}
/* Green colour styling for h2 */
.tickets h2, .venue h2, .origin h2 {
    color: var(--green-bg-colour);
}
/* Different heading sizings */
h1 {
    font-size: clamp(2.5em, 10vw, 90px);
    color: var(--green-bg-colour);
    padding: .5em 0 .5em 0;
}
h2 {
    font-size: clamp( 1em, 8vw, 40px);
    font-weight: 200;
    padding-top: .5em;
}
h3 {
    font-size: clamp(1.5em, 6vw, 30px);
    font-weight: 300;
}
/* Targets paragraphs within main */
main>p {
    display: flex;
    margin: 1em auto;
    font-size: clamp(1em, 5vw, 25px);
    max-width: 60%;
    color: var(--black-text-colour)
}

/* ========== 5. IMAGES GENERAL RULES ========== */
.home img, .venue img, .grid-6 figure img, img:last-of-type {
    display: flex;
    height: auto;
}
/* Character images and actor images inside polaroid style wrapper */
.grid-1 figure img, .grid-2 figure img, .grid-3 figure img, 
.grid-4 figure img, .grid-5 figure img, .grid-6 figure img {
    display: flex;
    height: auto;
    margin: 0 auto;
    padding-top: 3em;
    width: clamp(20em, 60vw, 300px);
}

/* ========== 6. LINK STATES GENERAL RULES ========== */
/* Primary Navigation */
header>nav>ul>li>a:link, 
header>nav>ul>li>a:visited {
    color: var(--green-bg-colour);
}
header>nav>ul>li>a:hover {
    background-color: var(--green-bg-colour);
    color: var(--off-white-colour);
}
header>nav>ul>li>a:focus {
    border-color: var(--green-bg-colour);
}
header>nav>ul>li>a:active {
    color: var(--blue-bg-colour);
}
/* Footer Navigation */
footer a:link,
footer a:visited {
    text-decoration: none;
    color: var(--off-white-colour);
}
footer a:hover {
    text-decoration: underline;
}
footer a:focus {
    color: var(--off-white-colour);
}
footer a:active {
    color: var(--blue-bg-colour);
}

/* ========== 7. TRANSFORM GENERAL RULES ========== */
/* Full browser support */
footer a:hover, .home a:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

/* ========== 8. TYPOGRAPHY SPECIFIC RULES ========== */
.tickets p, .venue p, .origin p {
    width: 30em;
}
/* Targets paragraphs in polaroid style wrapper */
figure>p {
    display: flex;
    font-size: clamp(1em, 5vw, 25px);
    max-width: 100%;
    padding: 1em;
}
/* Home Page */
section>p:first-of-type {
    padding: 0 1em 1em 1em;
}
section>p {
    margin: 0 auto;
    padding: 1em;
    font-size: clamp(1em, 5vw, 23px);
}
.home h1 {
    padding: .2em;
}
/* Credits heading */
.home>h2:first-of-type {
    color: var(--green-bg-colour);
}
/* Watch the trailer heading */
.home>h2:last-of-type {
    padding: .5em;
    color: var(--green-bg-colour);
}
/* Targets h2 within figure only */
figure>h2:first-of-type {
    padding-bottom: .5em;
}
/* Names in card layout */
.home h3 {
    padding: 1em;
}
/* Targets paragraphs on home page */
.home>section>p, .home>p {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: clamp(30em, 80vw, 100px);
}
/* Tickets Page */
/* Ticket info paragraph */
.tickets>p {
    display: flex;
    margin: 1em auto;
    width: 30em;
}
/* Div to align prices to center of the page */
.grid-5>div {
    text-align: center;
}
/* Ticket and showtime info blocks */
.tickets dl {
    /* Layout */
    display: inline-block;
    text-align: left;
    justify-content: center;
    padding: .5em 2.5em;
    margin-top: 3em;
    width: 20em;
    /* Design */
    border: 3px solid var(--green-bg-colour);
    border-radius: .5em;
    background-color: var(--green-bg-colour);
    box-shadow: 8px 5px 5px var(--blue-shadow);
    transition: .5s ease-in-out;
}
/* Prices/showtimes heading */
.tickets dt {
    font-size: clamp(1em, 7vw, 40px);
    text-decoration: underline;
    margin: 0 auto;
    text-align: center;
    padding: .5em;
}
/* Information on prices and showtimes */
.tickets dd {
    display: block;
    margin: 0 auto;
    padding: 0 0 1em 0;
    text-align: left;
    font-size: clamp(1.5em, 5vw, 25px);
}
/* Floats ticket prices and showtimes to the right hand side */
.grid-5 span {
    float: right;
}
/* Venue Page*/
/* Contact us padding */
.venue h2:last-of-type {
    padding-bottom: .5em;
}
/* Contact details wrapper */
.venue div {
    font-size: clamp(1em, 50vw, 20px);
    color: var(--black-text-colour);
    margin: 0 auto;
    padding: 1em 25vw 2em 25vw;
}
/* Green/bold contact titles */
.venue dt {
    font-weight: 900;
    color: var(--green-bg-colour);
}
.venue dl {
    padding: .5em;
}
/* Origin Page */
/* Padding for different headings */
.origin>h1 {
    padding-top: .5em;
}
.origin>h2:first-of-type {
    padding-top: 2.5em;
}
.origin img~h3 {
    padding-top: 1em;
}
/* 404 Page */
.error h1 {
    font-size: clamp(5em, 30vw, 100px);
    padding: .5em;
    width: 100%;
}
/* Targets home link in paragraph */
.error a:first-of-type {
    display: flex;
    justify-content: center;
    font-size: 2em;
    height: 1em;
    color: var(--green-bg-colour);
}

/* ========== 9. COLOUR SPECIFIC RULES ========== */
/* Green background for specific sections on home page */
.home>section:first-of-type, .home>section:nth-of-type(2), .home>section:last-of-type {
    background-color: var(--green-bg-colour);
}
/* H3 and paragraphs styled green in polaroid wrapper */
img~h3, img~h3~p {
    color: var(--green-bg-colour);
}
/* Shadow for polaroid style wrappers on blue background */
.grid-1 figure, .grid-3 figure, .grid-6 figure {
    box-shadow: 8px 5px 5px var(--blue-shadow);
}
/* Shadow for polaroid style wrappers on green background */
.grid-2 figure, .grid-4 figure {
    box-shadow: 8px 5px 5px var(--green-shadow);
}
/* Green background colour for grids and sections on home */
.grid-1 h2, .grid-1 h3, .home section:nth-of-type(3) {
    color: var(--green-bg-colour);
}

/* ========== 10. CARD LAYOUT SPECIFIC RULES ========== */
figure {
    background-color: var(--off-white-colour);
    width: min(80vw, 400px);
    margin: 2em auto;
    margin-bottom: 1em;
}
/* Padding under polaroid style wrappers */
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
    padding-bottom: 2em;
}

/* ========== 11. CTA LINK HOME PAGE ========== */
.home>section>a {
    /* Layout */
    display: flex;
    justify-content: center;
    margin: 1em auto;
    padding: .5em;
    width: 7em;
    /* Design */
    font-size: clamp(1em, 6vw, 40px);
    text-decoration: none;
    color: var(--black-text-colour);
    background-color: var(--off-white-colour);
    border: 5px solid var(--cta-span-colour); 
    transition: 0.5s;
    box-shadow: 8px 5px 5px var(--green-shadow);
}
/* CTA hover state */
.home>section>a:hover {
    text-decoration: underline;
    background: var(--blue-bg-colour);
    color: var(--green-bg-colour);
    border-radius: .3em;
}
/* CTA padding underneath */
.home>section:first-of-type {
    padding-bottom: 2em;
}

/* ========== 12. IMAGES SPECIFIC RULES ========== */
/* Banner image on home page */
.home>img {
    padding: 0;
    width: 100vw;
}
/* Individual container for director, producer and starring as */
figure>img {
    margin: 1em 0 0 0;
    width: min(55vw, 300px);
}
/* Odyssey building photo on venue page */
.venue>img {
    margin: 0 auto;
    width: min(90vw, 800px);
    box-shadow: 8px 5px 5px var(--blue-shadow);
}
/* Desktop hover */
.venue>img:first-of-type:hover {
    content: url('images/odyssey.svg');
}
/* No padding between director/producer images and h2 */
.grid-1 figure img {
    padding: 0;
}

/* ========== 13. SVG's ========== */
/* Grass footer on all pages*/
main>img:last-of-type {
    width: min(100vw);
}
/* Soot ball on home page */
.home>section:first-of-type>div {
    width: clamp(4em, 25vw, 200px);
    margin: 3em auto;
    /* Transition to make the scale up smoother */
    transition: .5s ease-in-out;
}
/* Soot ball rotation and scale on hover and browser support */
.home>section:first-of-type>div:hover {
    -webkit-transform: rotate(70deg) scale(1.3);
    -moz-transform: rotate(70deg) scale(1.3);
    -ms-transform: rotate(70deg) scale(1.3);
    -o-transform: rotate(70deg) scale(1.3);
    transform: rotate(70deg) scale(1.3);
}
/* Totoro on tickets page */
.tickets img:first-of-type {
    display: flex;
    margin: 0 auto;
    padding-top: 2em;
    width: min(80vw, 900px);
}
/* Rabbit spirit on origin page*/
.origin>div:first-of-type {
    height: 100px;
    width: min(38vw, 200px);
    margin: 3em auto;
}
/* Cat bus 404 page */
.error>a>img {
    display: flex;
    width: min(80vw, 900px);
    margin: 0 auto;
    padding-top: 2em;
}

/* ========== 14. EMBEDDED ELEMENTS ========== */
/* Trailer Video */
iframe {
    display: flex;
    padding: 0 2em 2em 2em;
    width: 100vw;
    height: 62vw;
}
/* Google Maps */
.venue>iframe {
    display: flex;
    padding: .5em;
    margin: 1em auto;
    width: 62vw;
    height: 55vw;
    max-height: 450px;
}

/* ========== 15. MEDIA QUERIES ========== */
/* Medium screen size, tablets and larger */
@media all and (min-width: 820px) {
    /* Grid for director, producer, starring as... on home page, 
    tickets and showtimes on tickets page, characters on origin page*/
    .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
        display: grid;
        grid-gap: 0;
        grid-template-columns: repeat(2, 1fr);
    }
    /* Reduces gap between divs in grid */
    .grid-5 {
        max-width: 900px;
        margin: 0 auto;
    }
    /* Grid for footer info */
    footer>div {
        display: grid;
        grid-gap: 0;
        grid-template-columns: repeat(3, 1fr);
    }
    /* Nav for larger screens */
    nav[aria-label="primary"] ul {
        display: flex;
        justify-content: center;
        list-style-type: none;
        text-align: center;
        width: 100%;
        padding: 0;
        background-color: var(--off-white-colour);
	}
	nav[aria-label="primary"] ul li {
		display: inline;
	}
	nav[aria-label="primary"] ul li a:link {
		display: inline-block;
        font-size: max(2vw, 13.5px);
        text-decoration: none;
        padding: 1em;
	}
    /* Shows full size menu */	
	#menu-toggle + .toggle + ul, #menu-toggle:checked + .toggle + ul {
		display: block;
	}
    	/* Hides display of mobile menu text */
	#menu-toggle + .toggle, #menu-toggle:checked + .toggle {
		display: none;
	}
    /* Hides umbrella icon */
    input[type="checkbox"], input[type="checkbox"]:checked {
        display: none;
    }
}
/* Larger screen size, laptop/desktop and larger */
@media all and (min-width: 1260px) {
    /* Grid for starring as...on home page, 
    and characters on origin page */
    .grid-2, .grid-3, .grid-4, .grid-6 {
        display: grid;
        grid-gap: 0;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* With thanks to Prisca for the mobile menu tutorial https://eyesrc.org/design-dev-samples/menu-toggle/index.html 
and JSFiddle code snippet for teaching me how to change mobile umbrella menu icon when clicked 
&#40 bonus that they use cat photos as an example &#41 http://jsfiddle.net/eliranmal/2rwnz/ */