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

/* --- PAGE STYLING --- */
body {
	font-family: 'forum', times, times new roman, serif;
	font-size: 25px;
	background-color: #f9f1e8;
	color: #252525;
}

main, header{
	margin: 2em 2em;
	max-width: 1000px;
}

header {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

header ul {
	margin-top: 1em;
}

header li {
	margin-top: 0.2em;
}

header nav li a {
	padding: 0.1em 0.5em;
}

details[open], #staff-picks details {
	display: block; /* consider using display: inline-block */
}

#back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	/* display: inline; */
	background-color: #f3b962;
	padding: 0.5em;
	border-radius: 1em;
	border: solid #fff 2px;
	font-size: 0.75em;
}

#back-to-top a{
	display: none;
}

footer {
	background-color: #0D5470;
	color: #f9f1e8;
	padding: 1em 2em;
	margin-top: 2em;
}

footer section{
	padding: 1em 0;
	margin: 0.5em 0;
	border-bottom: solid 2px #f3b962;
}

/* --- TYPOGRAPHY --- */

h1, h3 {
	font-family: 'Caprasimo', Georgia, 'Times New Roman', Times, serif;
	color: #0A4D68;
}

h2, #by-genre details, #staff-picks details li:first-of-type {
	font-family: 'Staatliches', sans-serif;
}

h1, h2, h3 {
	font-size: 2em;
	text-align: center;
	text-wrap: balance;
}

h1, h2 {
	text-wrap: balance; /* ensures an even distribution of the text so there is no orphan words */
}

h2, h3, nav[aria-label="shop"]{
	text-align: center;
}

h2, h3{
	margin-top: 1em;
}

footer h3 {
	color: #fff;
	text-align: left;
	font-size: 1em;
	margin-top: 0;
}

nav[aria-label="shop"] {
	font-size: 1.5em;
}

h3+details {
	margin-top: 1em;
}

h3+p {
	text-align: center;
}

figcaption {
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

h2+details {
	margin-top: 1em;
}

p { 
	line-height: 1.1em;
}

main p, address { 
	margin-top: 1em;
}

main address p, ul[aria-label="opening-times"] {
	margin-top: 0;
	text-align: center;
}

ul[aria-label="events"] {
	margin-top: 1em;
	text-align: center;
}

main p+address {
	font-weight: 600;
}

.quote {
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	padding: 1em;
	font-style: italic;
}

p span {
	display: block;
	color:#f3b962;
	text-align: right;
	font-style: normal;
	font-weight: bold;
	margin-top: 0.2em;
	padding-right: 1em;
}

li {
	line-height: 1.2em;
}

.copyright {
	text-align: center;
}

summary {
	list-style: none;
}

#by-genre summary {
	font-size: 2em;
	text-transform: uppercase;
	text-align: center;
	padding: 0 0.2em;
	margin: 0.1em 0;
}

#by-genre li {
	margin-top: 1em;
}

#by-genre li.content {
	margin-top: 0.2em;
}

li span {
	font-size: 1.1em;
	font-weight: 800;
}

header nav {
	margin-top: 1em;
	font-size: 1.1em;
}

details li.content {
	font-family: 'forum', times, times new roman, serif;
}

#about>figure figcaption {
	font-weight: 400;
	margin-top: auto;
	margin-bottom: auto;
	text-align: left;
}

#staff-picks summary {
	font-size: 1.5em;
	text-align: center;
	width: 100%;
}

#staff-picks p, #staff-picks ul {
	max-width: 400px;
	margin: 1em auto;
}

#staff-picks li:last-of-type, #staff-picks li:nth-of-type(2){
	margin-top: 0.5em;;
}
/* --- IMAGES --- */

#logo {
	display: block;
	width: 100px;
	height: auto;
	margin: 0 auto;
} 

main img {
	display: block;
	margin: 2em auto 1em;
	width: 100%;
	max-width: 400px;
	height: auto;
}

#by-format img {
	width: 100%;
	max-width: 400px;
	height: auto;
	margin: 2em auto 1em;
}

iframe {
	display: block;
	max-width: 100%;
	max-height: 400px;
	margin-top: 1em; 
}

#staff-picks details {
    position: relative;
}

#staff-picks img.portrait {
	position: absolute;
	top: 3.5em;
	right: 1em;
	z-index: 2;
	border-radius: 100%;
	max-width: 100px;
	height: auto;
	border: solid 2px #fff; 
}

#staff-picks img {
	display: block;
	max-width: 400px;
	height: auto;
}

#about img {
	max-width: 400px;
}

/* --- NAVIGATION --- */

input[type="checkbox"] {
	opacity: 0;
	position: absolute;
}

input[type="checkbox"] + label + ul {
	display: none;
}

input[type="checkbox"]:checked + label + ul{
	display: block;
}

nav[aria-label="shop"] li, #staff-picks summary {
	line-height: 1em;
	border-top: 2px solid #0D5470;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

nav[aria-label="shop"], #staff-picks {
	margin-top: 2em;
	border-bottom: 2px solid #0D5470;
}

/* ---	LINK STATES --- */

a:link, a:visited {
	color: #252525; /* The default text color for links overrides my set text colour in my body. This will, in turn, override that and change it back to black. */
	text-decoration: none; /* removes default links underline */
}

a:hover, a:active, a:focus {
	/*font-weight: 600;*/
}

header li a:hover, header li a:active, header li a:focus {
	color: #0D5470;
	background-color: #f3b962;
	border-radius: 1em;
}

footer a:link, footer a:visited {
	color: #fff;
}

nav[aria-label="shop"] li:hover, nav[aria-label="shop"] li:active, nav[aria-label="shop"] li:focus, #staff-picks summary:hover, #staff-picks summary:active, #staff-picks summary:focus {
	color: #fff;
	background-color: #f3b962;
	transition: background-color 0.5s ease-in-out; /* makes for a smoother transition between colours */

}

nav[aria-label="shop"] li:hover, nav[aria-label="shop"] li:active, nav[aria-label="shop"] li:focus, #staff-picks summary:hover, #staff-picks summary:active, #staff-picks summary:focus, #by-genre summary:hover {
	cursor: pointer;
}

#by-genre summary:hover {
	color: #f3b962;
}

#by-format p {
	display: none;
}

#by-format figure {
	position: relative;
}

#by-format img:hover{
	background-color: #fff;
	width: 100%;
	height: 100%;
	opacity: 60%;
	transition: opacity 0.5s ease-in-out;
}

#by-format figure:hover p {
	position: absolute;
	display: block;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding-bottom: 3em;
	font-weight: 600;
}

#back-to-top:hover a{
	display: contents;
	transition: display 1s ease-in-out;
}

/* --- MEDIA QUERIES ---*/

@media (min-width: 600px) {

	main {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}

	main img {
		max-width: 800px;
	}

	#by-genre details {
		display: inline;
	}

	#by-genre deails[open] {
		display: block;
	}
	
	#by-genre summary {
		border-right: 6px solid #0D5470;
	}

	main iframe+p {
		text-align: center;
	}
}

@media (min-width: 960px) {

	header {
		margin-left: auto;
		margin-right: auto;
	}

	header nav li{
		display: inline;
		border-left: solid #f3b962 4px;	
	}

	header nav li a {
		margin-left: 0.2em;
	}

	header nav li:first-of-type {
		border-left: none;
	}

	header nav li a:hover {
		border-radius: 0;
		border-bottom: solid #0D5470 4px;
		background-color: transparent;
		transition: color 0.2s ease-in-out;
	}

	/* change the main page nav bar from a clickable drop down menu to a menu that remains at the top of the page */

	header input, header label {
		content: none;
		display: none;
	}

	header img {
		width: 400px;
		height: auto;
	}

	input[type="checkbox"] + label + ul {
		display: block;
	}
	
	h2, #by-genre summary { 
		font-size: 3em;
	}

	#homepage {
		margin-top: 2em;
		position: relative;
	}

	#homepage figcaption {
		position: absolute;
		display: block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		background-color: #f3b962af;
		padding: 1em 0;
	}

	#by-genre, #by-format, #staff-picks {
		margin: 2.5em 0;
	}

	#by-genre details[open] summary{
		border-right: none;
	}

	#by-format {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1em;
		grid-template-areas:
		'subtitle subtitle';
	}

	#by-format h3 {
		grid-area: subtitle;
	}

	#by-format img:hover {
		width: 100%;
  		max-width: 400px;
  		height: auto;
	}

	#founder-portraits, #about>figure {
		grid-template-columns: repeat(2, 1fr);
	}

	#founder-portraits, footer, #staff-portraits, #about>figure {
		display: grid;
		gap: 1em;
		margin-top: 1em;
	}

	#about>figure {
		margin: 0 auto;
	}

	footer, #staff-portraits{
		grid-template-columns: repeat(3, 1fr);
	}

	footer>p {
		grid-column: 2;
	}
	
	footer address {
		border-bottom: none;
	}
	
	footer section {
		border-right: solid 2px #f3b962;
		border-bottom: none;
	}

	footer section:last-of-type {
		border-right: none;
	}
}

@media (min-width: 1200px) {

	#by-format {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
		'subtitle subtitle subtitle';
	}
	
	#by-format figure:last-of-type {
		border-right: none;
	}

	#by-format figure:first-of-type {
		border-left: none;
	}
}