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

html {
	scroll-behavior: smooth;
}

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, footer div {
	margin: 1em 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 span{
	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 --- */

#homepage h1 {
	color: #252525;
	font-family: 'forum', times, times new roman, serif;
	font-size: 0.8em;
	display: block;
	margin: 0 auto 1em;
}

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


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

#by-genre li.content {
	font-family: 'forum', times, times new roman, 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 */
}

h1 span {
	display: block;
	font-size: 1.5rem;
	margin-top: 0.5em;
}

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

h2:not(#homepage 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;
}

main p, address, footer h3+ul { 
	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, p, .about figcaption {
	line-height: 1.25em;
}

.copyright {
	text-align: center;
	padding-top: 1em;
}

summary {
	list-style: none;
}

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

#by-genre ul {
	display: block;
	margin: 0 auto;
	max-width: 600px;

}

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: 200px;
	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;
}

#by-genre img {
	max-width: 600px;
}

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

footer img {
	display: block;
	margin: 1em auto 0.5em;
	max-width: 100%;
}

/* --- ERROR PAGE --- */

#error-page p {
	text-align: center;
}

#error-page img {
	height: 50px;
	width: auto;
}

/* --- NAVIGATION --- */

input[type="checkbox"] {
	opacity: 0;
	position: absolute;
	transition: 0.8s ease all;
}

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

#by-genre input[type="radio"] {
	opacity: 0;
}

#by-genre label {
	display: block;
	text-align: center;
	font-size: 2em;
}

.slides {
	display: none;
}

/* -- show slide when radio button is checked -- */
#grime:checked ~ .carousel-slides .grime-slide, #rnb:checked ~ .carousel-slides .rnb-slide, #uk-rap:checked ~ .carousel-slides .uk-rap-slide, #reggae:checked ~ .carousel-slides .reggae-slide, #soul:checked ~ .carousel-slides .soul-slide, #pop:checked ~ .carousel-slides .pop-slide, #rock-and-metal:checked ~ .carousel-slides .rock-and-metal-slide, #us-rap:checked ~ .carousel-slides .us-rap-slide {
	display: block;
}

/* --- menu lines toggle ---  */
label.toggle  {
	display: block;
	margin: 0 auto;
}

label.toggle:hover {
	font-weight: 600;
	cursor: pointer;
}

label.toggle [class*='line-'] {
	background: #252525;
	display: block;
	border-radius: 3px;
	height: 3px;
	width: 26px;
	margin: 0 auto 6px;
	transform: rotate(0deg);
	transition: 0.3s ease all;
}

input[type="checkbox"]#main-nav:checked + label.toggle .line-top {
	transform: rotate(45deg);
	transform-origin: 0 0;
	background: #f3b962;
}

input[type="checkbox"]#main-nav:checked + label.toggle .line-mid {
	opacity: 0;
}

input[type="checkbox"]#main-nav:checked + label.toggle .line-bot {
	transform: rotate(-45deg);
	transform-origin: 0 90%;
	background: #f3b962;
}

a.skip-link {
  font-family: 'Caprasimo', Georgia, 'Times New Roman', Times, serif;
  position: absolute;
  top: -40px;
  left: 0;
  background: #fff;
  padding: 8px 16px;
  z-index: 100;
  text-decoration: none;
  transition: top 0.3s ease;
}

a.skip-link:focus {
  top: 0;
}

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

/* set outline for keyboard focuses */
a:focus-visible, input[type="checkbox"]#main-nav:focus-visible + label.toggle, #by-genre label:focus-visible, #staff-picks summary:focus-visible {
	outline: 3px solid #f3b962;
	outline-offset: 4px;
}

a.skip-link:link, a.skip-link:visited {
  color: #0D5470;
}

header li a:hover, header li a:active {
	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-visible, #staff-picks summary:hover, #staff-picks summary:active, #staff-picks summary:focus-visible {
	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-visible, #staff-picks summary:hover, #staff-picks summary:active, #staff-picks summary:focus-visible, #by-genre label:hover {
	cursor: pointer;
}

#by-genre label:hover, #by-genre label:focus-visible {
	color: #f3b962;
}

#by-format p {
	display: none;
	font-family: 'Staatliches', sans-serif;
}

#by-format figure {
	position: relative;
}

#by-format figure img{
	background-color: #fff;
	width: 100%;
	height: auto;
	transition: all 0.3s ease-in-out;
}
#by-format figure:hover img{
	opacity: 40%;
}

#by-format figure:hover p {
	position: absolute;
	display: block;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-weight: 600;
	width: 100%;
	padding: 1em;
	margin-top: 0;
	text-align: center;
}

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

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

@media (min-width: 600px) {

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

	main img {
		max-width: 800px;
	}

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

	input[type="checkbox"]#main-nav + label.toggle, input[type="checkbox"]#main-nav:checked + label.toggle {
		display: none;
	}	

	h2, #by-genre label { 
		font-size: 3em;
	}

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

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

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

	#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 div, #staff-portraits, .about>figure {
		display: grid;
		gap: 1em;
		margin: 1em auto 0;
	}

	.about>figure {
		margin: 0 auto;
	}

	footer div, #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;
	}
}