/* Variables */
:root {
	--white: #fff;
	--black: #000;
	--smoke: #eee;
	--charcoal: #333;
	--hover-color: #faf5eb;
	--accent-color: #f58719;
	--social-color: #34a4eb;
	--block-color: #f0e6dc;
	--error-color: #b71c1c;
	--primary-color: var(--accent-color);/*#5b0303;*/
	--nav-color: var(--hover-color);/*#2d0404;*/
	--active-tab-color: var(--accent-color);
	--inactive-tab-color: var(--block-color);
	--hover-tab-color: #fadc96;
}

/* DEFAULTS */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    /* Cancel out some differences between browser defaults */
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

body {
   /* fallback height */
   min-height: 100vh;

   /* new small viewport height for modern browsers */
   min-height: 100svh;
}

/* Apply a natural box layout model to all elements, but allowing components to change it.
 */
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

ul, ol {
	list-style-position: inside;
}

nav ul, footer ul {
	list-style-type: none;
}

/* TYPOGRAPHY */

body {
    line-height: 1.5;
    color: var(--charcoal);
    font-family: "Lato", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
}

h1, h2, h3 {
	font-family: "Instrument Serif", Arial, Helvetica, sans serif;
    font-weight: bold;
}

h1 {
    font-size: 2rem;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    line-height: 1;
}

h2 { 
    font-size: 1.25rem;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

h3 {
	font-size: 1.125rem;
	margin-bottom: 0;
}

#site-title {
	font-family: "Instrument Serif", Arial, Helvetica, sans serif;
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: 0;
}

#tagline {
	padding-bottom: 0.8em;
	text-align: center;
}

p { 
    margin: 0 0 1em 0; 
}

#HomePage {
	& .Content {
		font-family: "Instrument Serif", Arial, Helvetica, sans serif;
		font-size: 1.25em;
	}
}

& .item-link:link,
& .item-link:visited {
	font-family: "Instrument Serif", Arial, Helvetica, sans serif;
	text-decoration: none;
	color: inherit;
}

#UserDefinedForm {
	& label, & legend {
		font-family: "Instrument Serif", Arial, Helvetica, sans serif;
		font-weight: inherit;
	}
}


/* IMAGES */

img {
	margin: 0;
	width: 100%;
    height: auto;
}

#logo {
    height: 4.5rem;
	width: auto;
}

#AboutPage img,
#ProfilePage img,
#InstrumentTypesPage img,
#InstrumentPage img,
#InstrumentModelPage img {
	max-height: 14.5em;
	object-fit: contain;
}

/* COLOUR SCHEME */

header {
	background-color: var(--primary-color);
    color: var(--white);
}

#main-menu, #main-menu ul.secondary {
    background-color: var(--nav-color);
}

#main-menu a {
    color: var(--charcoal);
}

#main-menu a.current {
    color: var(--accent-color);
}

#main-menu a:hover {
    color: var(--hover-tab-color);
}

footer {
    background-color: var(--nav-color);
	font-size: 0.75em;
}

footer, footer a {
	color: var(--charcoal);
}

.show-tab {
	display: block;
}
.hide-tab {
	display: none !important;
}

.center {
	position: absolute;
	top: 4%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	width: max-content; /* Ensure the text takes up only as much space as needed */
}

/* DEFAULT LAYOUT - SINGLE COLUMN */

header, main, footer {
    padding: 1em;
}

#Breadcrumbs {
	padding-top: 0.25em;
	padding-left: 1em;
	width: 100%;
	max-width: 36rem;
	margin: 0 auto;

	& a:link, & a:visited {
		color: var(--accent-color);
	}
}

main {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
}

footer {
	& ul {
		list-style: none;
		display: flex;
		justify-content: space-between;
		gap: 2em;
	}
	& .social-links {
		font-size: 2.5em;
	}
	& .social-links a {
		color: var(--social-color);
		padding-right: 0.25em;
	}
	& .space {
		display: none;
	}
}

.row {
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.75em;
	column-gap: 0.75em;
}
.col {
	flex-basis: auto;
	flex-grow: 1;
	min-width: 0;
	max-width: 100%
}

/* 1px = 0.0625em */

.button {
	margin-top: 0.5em;
}
.button a {
	background-color: var(--accent-color);
	color: var(--charcoal);
	border: none;
	outline: none;
	cursor: pointer;
	font-size: 1.15em;
	transition: 0.3s;
	padding: 0.5em 1.5em;
	text-decoration: none;
}
.button a:hover {
	background-color: var(--hover-tab-color);
	color: var(--charcoal);
}

.items-header {
	margin-top: 1.25em;
}
.items {
	& .item {
		background-color: var(--white);
		max-width: 20em;
		max-height: 20em;
		margin-bottom: 1em;
		box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);

		& .item-image {
			margin: 0.5em;
			background-color: var(--charcoal);
		}
		& .item-caption {
			text-align: center;
			margin-left: 0.25em;
			margin-right: 0.25em;
			margin-bottom: 0.5em;
		}
	}
	& .item:hover {
		background-color: var(--hover-color);
	}
}
.content-image-left {
	float: left;
	width: auto;
	margin-top: 0.5em;
	margin-right: 0.75em;
	margin-bottom: 0.75em;
}
.content-image-right {
	float: right;
	width: auto;
	margin-top: 0.5em;
	margin-left: 0.75em;
	margin-bottom: 0.75em;
}

.testimonials-tab {
	margin-bottom: 0.5em;
	background-color: var(--block-color);
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
	padding: 0.5em 1.5em;
}
.testimonials-tab:hover {
	background-color: var(--hover-tab-color);
}
.active-tab {
	background-color: var(--accent-color);
}
.quote {
	background-color: var(--block-color);
	padding: 0.25em;
	border-radius: 0.25em;
	width: 100%;
}
.quote blockquote {
	font-size: 1.25em;
	margin: 0.5em;
}
.quote blockquote:before {
	color: var(--accent-color);
	content: "\201C";
	font-size: 3em;
	line-height: 0.1em;
	margin-right: 0.1em;
	vertical-align: -0.4em;
}
.quote blockquote:after {
	color: var(--accent-color);
	content: "\201D";
	font-size: 3em;
	line-height: 0.1em;
	margin-left: 0.1em;
	vertical-align: -0.4em;
}
.quote figcaption {
	margin: 0.5em;
}

#HomePage {
	&.quote {
		max-width: 28.35em;
	}
}

#InstrumentTypesPage {
	& .InstrumentType-item {
		background-color: var(--smoke);
		border-radius: 0.5em;
		margin-bottom: 1em;

		& .InstrumentType-image {
			padding-top: 0.5em;
			padding-left: 0.5em;
			padding-right: 0.5em;
		}
		& .InstrumentType-caption {
			padding-left: 0.5em;
			margin-bottom: 0.5em;
		}
	}
}

#InstrumentModelPage {
	& .content {
		display: inline-block;
		width: 100%;
		
		& img {
			max-width: 10em;
		}
		& #informaton h2 {
			margin-bottom: 0.25em;
		}
		& .info-details {
			background-color: var(--block-color);
			width: fit-content;
			padding: 0.5em 0.75em;
		}
		& .information {
			margin: 0;
			
			& .label {
				font-weight: bold;
				padding-right: 0.5em;
			}
			& .label:after {
				content: ":";
			}
		}
	}
	& .image {
		flex: 33%;
		max-width: 31%;
		background-color: var(--smoke);
		height: fit-content;
		
		& img {
			cursor: pointer;
		}
	}
	& .image:hover {
		background-color: var(--hover-color);
		box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
	}
	& .modal {
		display: none;
		position: fixed;
		z-index: 1000;
		padding-top: 100px;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: var(--black);
		filter: opacity(0.94);
	}
	& .modal-content {
		margin: auto;
		display: block;
		width: 80%;
		max-width: 40em;
		max-height: 80vh;
	}
	& .close {
		position: absolute;
		top: 15px;
		right: 35px;
		color: var(--white);
		font-size: 40px;
		font-weight: bold;
		transition: 0.3s;
	}
	& .close:hover,
	& .close:focus {
		color: var(--accent-color);
		text-decoration: none;
		cursor: pointer;
	}
}


#UserDefinedForm {
	& form {
		padding: 1em;
		background-color: var(--block-color);
	}
	& .middleColumn {
		margin-top: -0.375em;
		margin-bottom: 0.5em;
		
		& * {
			border: none;
		}
		& input[type="text"] {
			line-height: 1.25em;
			text-indent: 0.25em;
			width: 50%;
		}
		& input[type="date"] {
			line-height: 1.25em;
			width: 50%;
		}
		& select {
			height: 1.375em;
			width: 50%;
		}
		& input[type="email"] {
			line-height: 1.25em;
			width: 100%;
		}
		& textarea {
			width: 100%;
		}
	}
	& .field.textarea > .middleColumn {
		margin-top: -0.1875em;
	}
	& .g-recaptcha {
		margin-top: 0.625em;
	}
	& .field.nocaptcha {
		margin-bottom: 0.375em;
	}
	& .requiredField label:after {
		color: var(--error-color);
		content: " *";
	}
	& .message.error {
		display: inline-block;
		width: 100%;
		color: var(-error-color);
	}
	& input[type="submit"] {
		border: none;
		transition: 0.3s;
		padding: 0.5em 1.5em;
		background-color: var(--accent-color);
		color: var(--charcoal);
		cursor: pointer;
	}
}

#Blog {
	& main {
		display: flex;
		flex-wrap: wrap;
		row-gap: 0.75em;
		column-gap: 0.75em;
	}
	& .blog-entry {
		order: 2;
	}
	& .post-summary {
		background-color: var(--block-color);
		padding: 0.5em;
		margin-bottom: 0.75em;
		
		& h2, 
		& a:link, 
		& a:visited {
			color: var(--accent-color);
			margin-top: 0;
		}

		& > p:nth-child(4) {
			display: none;
		}
		& .blog-post-meta {
			padding-top: 1em;
			margin-bottom: 0;
		}
	}
	& .pagination {
		& a:link, 
		& a:visited {
			color: var(--accent-color);
		}
		& span:first-of-type:before {
			content: "Page: ";
		}
	}
	& .blog-sidebar {
		order: 1;
		display: flex;
		column-gap: 0.75em;
		
		& .secondary {
			margin-top: 0.75em;
		}
		& ul {
			background-color: var(--block-color);
			list-style-type: none;
			padding: 0.5em 0.75em;

			& a:link, & a:visited {
				color: var(--accent-color);
				
				& .arrow {
					display: none;
				}
			}
		}
	}
}

#BlogPost {
	& main {
		display: flex;
		flex-wrap: wrap;
		row-gap: 0.75em;
		column-gap: 0.75em;

		& a:link, & a:visited {
			color: var(--accent-color);
		}
	}
	& .blog-entry {
		order: 2;
	}
	& .blog-post-meta {
		padding-top: 1em;
		margin-bottom: 0;
	}
	& .blog-sidebar {
		order: 1;
		display: flex;
		column-gap: 0.75em;
			
		& .secondary {
			margin-top: 0.75em;
		}
		& ul {
			background-color: var(--block-color);
			list-style-type: none;
			padding: 0.5em 0.75em;

			& a:link, & a:visited {
				color: var(--accent-color);
				
				& .arrow {
					display: none;
				}
			}
		}
	}
}

/* MOBILE MENU */

#main-menu {
    height: 100%;
    width: 0;
    max-width: 30em;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 3.75rem;
    transition: 0.33s; /* Transition effect to slide in the sidenav */
}

#main-menu.menu-open {
    width: 100%;
}

#main-menu ul {
	white-space: nowrap;
}

#main-menu li {
    font-size: 1.125rem;
    padding: 0.5em 2em;
}

#main-menu li a {
    text-decoration: none;
    /* display: block; */
}

#main-menu ul.secondary {
    margin-top: 0.5em;
}

#menu-open-button, #menu-close-button {
    font-weight: 400;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 1rem;
    background: transparent;
    border: 0;
    color: var(--white);
    cursor: pointer;
}

#menu-close-button {
	color: var(--accent-color);
}
#menu-open-button:hover,
#menu-close-button:hover {
	color: var(--hover-tab-color);
}

/* The font size and top of the two "buttons" needs adjusting to get them to appear
   the same. */
#menu-open-button {
    font-size: 2rem;
    top: 1rem;
}

#menu-close-button {
    font-size: 2.75rem;
    top: 0.6rem;
}

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

    A layout with two content columns and flexible white space on either side.

    If no sidebars are required, then the code for the Page grid can be removed.

    Calculate the media query's break point size by adding together the two main content
    columns in the grid, three times the column-gap (because there are four columns
    there are three gaps between them), and two to allow for the vertical
    scroll bar. This template's default width is calculated like this:
    36rem + 24rem + (3 x 2rem) + 2rem = 68em (note we use em, not rem, as the
    break point unit). */
@media screen and (min-width: 68em) {
    
    /* Page grid
    
    Create a four-column grid:
    1. The first column allows for white space to the left of the main content.
    2. The second column contains the main content.
    3. The third column contains the two sidebars (#1 above #2).
    4. The fourth column allows for white space to the right of the sidebars.
    
    The header, main menu, and footer are the full width of the window (spanning all 
    four columns). This can be altered by changing their grid-column values.
    
    The height of the fourth row will be flexible, so that sidebar #1 will have its
    content's height and sidebar #2 can increase its height if needed. The need
    for this arises if the main element has more height than the two sidebars
    combined.    */

    body {
        display: grid;
        grid-template-columns: 1fr 64rem 1fr;
        grid-template-rows: min-content min-content min-content 1fr min-content;
        grid-template-areas: "header  header  header"
                             "menu    menu    menu"
                             ".       crumbs  ."
                             ".       main    ."
                             "footer  footer  footer";
        column-gap: 2rem;
    }
    
    header {
        grid-area: header;    
    }
    
    #main-menu {
        grid-area: menu;
    }

	#Breadcrumbs {
        grid-area: crumbs;
    }
    
    main {
        grid-area: main;
    }
    
    footer {
        grid-area: footer;
    }
	
           
    #Breadcrumbs {
        /* Override the max-width set above for single-column layout. */
        max-width: 100%;
    }

    main {
        /* Override the max-width set above for single-column layout. */
        max-width: 100%;
    }
    
    /* End of page grid */

    /* Header layout */
    
    header {
        display: flex;
        flex-direction: row;
    }
    
    header > div {
        /* The div in the header takes up all remaining space in the flexbox
           and its content is centred. */
        flex-grow: 1;
        text-align: center;
    }
    
    /* Main menu
    
       Now we change to a visible main menu, so we have to override the 
       mobile menu above. */
    
    #main-menu {
        position: static;
        width: 100%;
        max-width: 100%;
        padding: 0;
        transition: 0s;
    }

    #menu-open-button, #menu-close-button {
        display: none;
    }
    
    #main-menu ul {
        display: flex;
        justify-content: center;
        /* To get the main menu to sit above the two columns, it 
            needs to be the same width as the total of those columns (see above). */
        /* width: 62rem; */
        /* margin: 0 auto; */
    }
    
    #main-menu li {
        margin: 0.5em 2em;
        padding: 0;
    }
    
    #main-menu ul.secondary {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        transition: all 0.5s ease;
        /* Negative left margin means the menu items will line up with the 
           parent menu item. */
        margin: 0 0 0 -1em;
        padding: 0;
        display: none;
    }
    
    #main-menu li:hover > ul.secondary {
        visibility: visible;
        opacity: 1;
        display: block;
        width: auto;
    }
    
    #main-menu ul.secondary li {
        margin: 0.5em 1em;
    }
	
	#Breadcrumbs {
		margin: 0 auto;
		padding-left: 0;
	}

    main {
        padding: 0.5em 0 1em 0;
    }
    
    footer {
        padding: 1em;
 
		& .space {
			display: list-item;
		}
	}
    
    /* Typography */
    
    #site-title {
        font-size: 3rem;
    }

	.center {
		top: auto;
	}

	#HomePage {
		& main {
			margin-top: 0.5em;
		}
		& img {
			max-height: 40em;
		}
		& figure.quote {
			max-width: 49%;
		}
	}

	#InstrumentPage {
		& .item-image {
			min-height: 14.6em;
		}
	}

	#InstrumentModelPage {
		& .content img {
			max-width: none;
		}
		& .image {
			flex: 25%;
			max-width: 24%;
		}
	}

	#TestimonialsPage {
		& figure.quote {
			max-width: 49%;
		}
	}

	#Blog {
		& .blog-entry {
			flex: 75%;
			order: 1;
		}
		& .blog-sidebar {
			order: 2;
			margin-top: 1.6em;
			display: initial;
			column-gap: initial;
		}
	}
	#BlogPost {
		& .blog-entry {
			flex: 75%;
			order: 1;
		}
		& .blog-sidebar {
			display: initial;
			column-gap: initial;
			order: 2;
			margin-top: 1.6em;
		}
	}

} /* end - media 68em */


/* Testing */