/* 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;
	box-sizing: border-box;
}
/* 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;
}

/* - - - - - - - - Style Reset END - - - - - - - - */

:root {
	font-size: 18px;
	--background-color: #F6F1EA;
	--primary-color: #800039; 
	--secondary-color: #F6D43C;
	--tertiary-color: #00A1C6;

	--left-offset: 10vw;
	--mobile-left-offset: 5vw;

	--exhibition-max-width: 750px;

	--width1: 2vw;
	--width2: 6vw;
	--width3: 8vw;
	--width4: 10vw;
}


/* - - - - - - - - High-level Styles - - - - - - - - */

html {

}

body {
	background-color: var(--background-color);
}



/* - - - - - - - - High-level Styles END - - - - - - - - */

/* - - - - - - - - Text Styles - - - - - - - - */

/*	<uniquifier>: Use a unique and descriptive class name
	<weight>: Use a value from 400 to 900   */

.vollkorn-uniquifier {
  font-family: "Vollkorn", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* <uniquifier>: Use a unique and descriptive class name
	<weight>: Use a value from 100 to 900   */

.inter-uniquifier {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}

h1, h2, h3, h4 {
	font-family: "Vollkorn", serif;
}

h1 {
	font-size: clamp(2rem, 8vw, 6rem);
}

h2 {
	font-size: clamp(2rem, 6vw, 5rem);
}

h3 {
	font-size: clamp(1.6rem, 3vw, 3rem);
}

h4 {
	font-size: clamp(1.6rem, 2.5vw, 2.5rem);
}

h5 {
	font-family: "Inter", sans-serif;
	font-size: clamp(0.9rem, 1.3vw, 1.25rem);
}

p {
	font-family: "Times New Roman", serif;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.3em;
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


/* - - - - - - - - Text Styles END - - - - - - - - */

/* - - - - - - - - Header Styles - - - - - - - - */

header {
	display: flex;
	justify-content: flex-start;
	height: clamp(80px, 10vw, 120px);
	padding: clamp(1rem, 2vw, 2rem) 2vw 1vw;

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

#logo-img {
	width: clamp(100px, 10vw, 150px);
	height: clamp(100px, 10vw, 150px);
	padding: 0;
	background: url("assets/sun-logo.svg") no-repeat center center;
	background-size: contain;
	margin-top: clamp(-10px, 2vw, 15px);
}

#logo-text {
	max-height: clamp(70px, 9vw, 135px);
	width: clamp(200px, 40vw, 400px);
	margin-left: 2vw;
	padding: 0;
	background: url("assets/smithsonian-text.svg") no-repeat center center;
	background-size: contain;
}

/* - - - - - - - - Header Styles END - - - - - - - - */

/* - - - - - - - - Hero Styles - - - - - - - - */

#hero {
	margin: clamp(70px, 10vw, 100px) 0;
}

#hero h1 {
	width: clamp(420px, 60vw, 1100px);
	padding-left: var(--left-offset);
	border-bottom: 5px solid var(--primary-color);
}

#hero p {
	width: clamp(420px, 60vw, 1000px); 
	margin: 0.6em 0 3em;
	padding: 0.2em 1em;
	border-left: 11vw solid var(--primary-color);
}

#exhibition-selector {
	width: clamp(400px, 55vw, 900px);
	min-width: min-content;
	border-top: 5px solid var(--primary-color);
}

#exhibition-selector ul {
	display: flex;
	justify-content: right;
	padding: 0 3vw;
}

#exhibition-selector ul li {
	margin: 0 1em;
	padding: 1em 1em;
}

#exhibition-selector a {
	font-family: "Vollkorn", serif;
	font-size: clamp(1.2rem, 3vw, 2rem);
}

#current-selection {
	border-bottom: 5px solid var(--primary-color);
}

/* - - - - - - - - Hero END - - - - - - - - */

/* - - - - - - - - Exhibitions Styles - - - - - - - - */

.exhibition {
	position: relative;
	margin: clamp(4em, 8vw, 8em) 0;
	width: clamp(600px, 65vw, 1400px);
}

.exhibition p {
	box-sizing: content-box;
	padding: 0 1em;
	border-left: 15vw solid var(--primary-color);
	max-width: var(--exhibition-max-width);
}

.exhibition-header {
	margin: 0 0 0.6em 0;
	padding: 0 0 0 15vw;
	border-bottom: 3px solid var(--primary-color);
}

.exhibition-subheadings {
	display: flex;
	justify-content: space-between;
	font-weight: 200;
}

.location {
	margin: 0.3em 0;
	font-style: italic;
}

.date {
	margin: 0.3em 1em;
}

.info-link {
	display: flex;
	position: absolute;
	bottom: -1.5em;
	right: -1em;
	font-family: "Times New Roman", serif;
	font-size: clamp(1rem, 1.5vw, 1.5rem);
}

.info-link a {
	border-bottom: 3px solid var(--primary-color);
}

.info-link a:hover {
	text-decoration: none;
	font-style: italic;
}

/* Vary exhibition widths */
.exhibition-width1 {
	width: clamp(600px, calc(65vw + var(--width1)), calc(15vw + var(--exhibition-max-width) + var(--width1)));
}
.exhibition-width1 p {
	border-left: calc(15vw + var(--width1)) solid var(--primary-color);
}
.exhibition-width1 .exhibition-header {
	padding: 0 0 0 calc(15vw + var(--width1));
}
.exhibition-width2 {
	width: clamp(600px, calc(65vw + var(--width2)), calc(15vw + var(--exhibition-max-width) + var(--width2)));
}
.exhibition-width2 p {
	border-left: calc(15vw + var(--width2)) solid var(--primary-color);
}
.exhibition-width2 .exhibition-header {
	padding: 0 0 0 calc(15vw + var(--width2));
}
.exhibition-width3 {
	width: clamp(600px, calc(65vw + var(--width3)), calc(15vw + var(--exhibition-max-width) + var(--width3)));
}
.exhibition-width3 p {
	border-left: calc(15vw + var(--width3)) solid var(--primary-color);
}
.exhibition-width3 .exhibition-header {
	padding: 0 0 0 calc(15vw + var(--width3));
}
.exhibition-width4 {
	width: clamp(600px, calc(65vw + var(--width4)), calc(15vw + var(--exhibition-max-width) + var(--width4)));
}
.exhibition-width4 p {
	border-left: calc(15vw + var(--width4)) solid var(--primary-color);
}
.exhibition-width4 .exhibition-header {
	padding: 0 0 0 calc(15vw + var(--width4));
}


/* - - - - - - - - Exhibitions END - - - - - - - - */


/* - - - - - - - - Top-Exhibitions Styles - - - - - - - - */

.top-exhibitions .exhibition p, .top-exhibitions .exhibition-header {
	border-color: var(--secondary-color);
}

.top-exhibitions {
	padding-bottom: 5vw;
	background: url("assets/half-sun.svg") left clamp(100px, 12vw, 200px) no-repeat;
	background-size: clamp(400px, 35%, 500px);
}

.heading-bar {
	margin: 1.5em 0 1em;
	background-color: var(--secondary-color);
}

h2 {
	width: fit-content;
	margin-left: var(--left-offset);
	padding: 0 0.5em;
	background-color: var(--background-color);
}

.top-exhibitions .info-link a {
	border-bottom: 3px solid var(--secondary-color);
}

.info-link:hover .link-arrow {
	margin-right: -2em;
	width: 2em;
	background: url("assets/arrow-icon.png") center no-repeat;
	background-size: 1em 2em;
}


/* - - - - - - - - Top-Exhibitions END - - - - - - - - */


/* - - - - - - - - General-Exhibitions Styles - - - - - - - - */

.general-exhibitions .exhibition p, .general-exhibitions .exhibition-header {
	border-color: var(--primary-color);
}

.general-exhibitions .heading-bar {
	background-color: var(--primary-color);
}

#upcoming .heading-bar {
	background-color: var(--tertiary-color);
}

#upcoming .exhibition p, #upcoming .exhibition-header, #upcoming .info-link a {
	border-color: var(--tertiary-color);
}


/* - - - - - - - - General-Exhibitions END - - - - - - - - */

/* - - - - - - - - Footer Styles - - - - - - - - */

footer {
	display: flex;
	flex-direction: column;
	margin-top: clamp(40px, 15vw, 200px);
	padding: 2em 5vw 2em 15vw;
	background-color: var(--primary-color);
	color: white;
}

footer h4 {
	margin-bottom: 0.25em;
}

footer li {
	padding: 0.25em 0;
}

footer p {
	align-self: flex-end;
	font-family: "Inter", sans-serif;
	font-weight: 300;
	font-size: 1rem;
}


/* - - - - - - - - Footer Styles END - - - - - - - - */


/* - - - - - - - - Mobile Styling - - - - - - - - - - */

@media only screen and (max-width: 700px) {

  /* Font Sizes */

  h1, h2 {
  	font-size: 28px;
  }

  h2 {
  	margin-left: var(--mobile-left-offset);
  	padding: 0.2em;
  	width: max-content;
  }

  h3, h4 {
  	font-size: 22px;
  }

  h5, p, #exhibition-selector a {
  	font-size: 16px;
  }


  /* Exhibtiion Selection */

  #exhibition-selector {
		width: 90vw;
		border-top: 5px solid var(--primary-color);
	}

	#exhibition-selector ul {
		display: flex;
		justify-content: space-evenly;
		padding: 0;
	}

	#exhibition-selector ul li {
		font-size: 24px;
		margin: 0 0.3em;
		padding: 0.2em 0.5em;
	}


  /* Hero */

  #hero h1 {
  	width: 90vw;
  	padding: 0 var(--mobile-left-offset);
  }

  #hero p {
  	width: 90vw;
  	border-left: var(--mobile-left-offset) solid var(--primary-color);
  }


  /* Exhibition Layout */

  .top-exhibitions .exhibition-header, .general-exhibitions .exhibition-header {
  	width: 90vw;
  	padding-left: var(--mobile-left-offset);
  }

  .exhibition-subheadings {
  	flex-direction: column;
  	padding-bottom: 0.2em;
  }

  .date, .location {
  	margin: 0.2em 0 0;
  }

  .exhibition-width1, .exhibition-width2, .exhibition-width3, .exhibition-width4 {
  	width: 90vw;
  }

  .exhibition-width1 p, .exhibition-width2 p, .exhibition-width3 p, .exhibition-width4 p {
  	border-left: var(--mobile-left-offset) solid var(--secondary-color);
  	width: 85vw;
  }

  .info-link a {
  	font-style: italic;
  }

	.link-arrow {
		margin-right: -3vw;
		width: 2em;
		background: url("assets/arrow-icon.png") center no-repeat;
		background-size: 1em 2em;
	}

	/* Footer */ 

	footer {
		padding: 1em;
	}

	footer li, footer p {
		font-size: 16px;
		margin-top: 0.3em;
	}

}

@media only screen and (max-width: 320px) {
	.general-exhibitions #upcoming-heading {
		width: min-content;
	}
}