/* Jeff S., Updated 8/26/2024 */

@import url('https://fonts.googleapis.com/css2?family=Exo:wght@900&display=swap');

:root {
	--dark-blue: #000033;
	--dark-red: #660000;
	--mid-gray: #333;

	--logo-font: 'Exo', Arial, sans-serif;
	--light-font: #fff;
	--dark-font: #000;

	--txt-xl: 2em;
	--txt-lg: 1.3em;
	--txt-sm: .75em;

	--shadow: 0 0 1em rgba(0,0,0, .25);
	--shadow2: 0 0 .5em rgba(0,0,0, .5);
	--br: 5px;
}

* {box-sizing: border-box;}

html {
	font-size: 16px;
	color: var(--dark-font);
}

body {
	background-color: var(--mid-gray);
	font-family: Verdana, Arial, sans-serif;
}

#wrapper {
	background-color: #fff;
	border-radius: var(--br);
	box-shadow: var(--shadow);
}

header {
	background-color: #000;
	border-radius: inherit;
	color: #fff;
	padding-top: 1em;
	text-align: center;
}

main {
	padding: 0 1em;
}


h1, h2, h3 {
	font-family: var(--logo-font);
}

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: var(--txt-xl);
	text-align: center;
}

h3 {
	font-size: var(--txt-lg);
}

/* Currently Unused global styles
p { }
*/

a {
	color: var(--dark-red);
}


/* Styles for nav bar */
nav {
	background-color: #000;
	font-family: var(--logo-font);
	letter-spacing: 1px;
	overflow: hidden;
	text-align: center;
}

nav ul {
	list-style-type: none;
	padding: 0;
}

nav li {
	display: inline-block;
	margin: 1.3em 0;
}

nav a {
	color: #fff;
	background-color: #000;
	border-radius: var(--br);
	font-weight: bold;
	font-size: var(--txt-lg);
	padding: 1em;
	margin-bottom: 3px;
	text-align: center;
	text-decoration: none;
}

nav a:hover, a:active, a:focus {
	background-image: linear-gradient(#000, var(--mid-gray));
	color: #fff;
	transition: background-color ease-in-out 0.25s;
}

/* end */


/* layout & styles for image float */

aside {
	text-align: center;
}

figure {
	margin: 0;
}

figure img {
	border-radius: var(--br);
	box-shadow: var(--shadow2);
	width: 100%;
	height: auto;
}

figcaption {
	padding: 1em;
}

hr { /* HR clears image floats */
	width: 80%;
	clear: right;
	margin: 2em auto;
	border-top: 1px dashed var(--mid-gray);
}

/* Styles for User Table */

table {
	border: 1px solid #000;
	border-collapse: collapse;
	width: 100%;
	margin-top: 1em;
}

th {
	background-color: var(--mid-gray);
	color: #ffffff;
	font-size: 1.2em;
}

th, td {
	padding: 5px;
	border: 1px solid #000;
	text-align: center;
}

th#username {
	width:30%;
}

th#fullname {
	width: 30%;
}

th#email {
	width: 40%;
}

/* End User Table */

form {
	padding: 0 .5em;
}

fieldset {
	margin-top: 1em;
	width: 100%;
	border: none;
}

legend {
	font-family: var(--logo-font);
	font-size: var(--txt-lg);
	font-weight: bold;
}

label {
	font-weight: bold;
}

input, select, textarea {
	font-size: 18px;
	margin-top: 11px;
	padding: .5em 1em;
	width: 100%;
}

input[type=radio] {
	width: auto;
}

input[type=file] {
	padding: 0;
}

input[type=submit] {
	margin: 0 1em 0 0;
	max-width: 10rem;
}

form.login {
	border: 1px solid var(--mid-gray);
	border-radius: var(--br);
	padding: 2em 2.5em 1em;
}

form.login label {
	float: left;
	width: 100px;
	clear: left;
	text-align: right;
	padding-right: 10px;
	margin-top: 10px;
}

form.login input[type=submit] {
	display: block;
	font-size: 1.1rem;
	margin: 1em auto 0;
}

form.login p {
	text-align: center;
}

.logo {
	font-family: var(--logo-font);
	letter-spacing: 1.5px;
}

.logo span {
	color: var(--dark-red);
	text-decoration: underline;
/*	border-bottom: 5px solid; */
}

.card {
	border-radius: var(--br);
	box-shadow: var(--shadow);
	padding: 1em;
	margin-bottom: 1em;
}

.flex-card {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	margin-top: 2em;
	padding: 0;
}

.flex-admin {
	margin-top: 2em;
}

.admin-card h3, .admin-card p {
	margin-bottom: .5em;
	text-align: center;
}

.admin-card p {
	font-style: italic;
}

.admin-card img {
	border-radius: var(--br);
	width: 100%;
	height: auto;
}

ul.chevrons li::marker {
    content: "» ";
}

.member-bio {
	margin: 0 1em;
}

.member-bio h3 {
	font-size: var(--txt-xl);
}

.tour-date {
	display: flex;
	align-items: center;
	background-color: var(--mid-gray);
	border-radius: 5px 0 0 5px;
	color: var(--light-font);
	padding: .5em;
	text-align: center;
	width: 6em;
	min-width: 6em;
}

.tour-date p {
	font-size: 1.5em;
	font-weight: bold;
	margin: .3em 0;
}

.tour-info {
	margin: .5em 1em;
}

.tour-info a {
	color: var(--dark-font);
	text-decoration: none;
}

.tour-info h3 {
	margin: .5em 0 0;
}

.sold-out {
	background-color: var(--dark-red);
	border-radius: var(--br);
	color: #fff;
	font-size: var(--txt-sm);
	font-weight: bold;
	text-transform: uppercase;
	padding: .5em;
}

.searchbox {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 1em 0;
}

.searchbox input {
	font-size: 16px;
	margin-top: 0;
}

.searchbox input[type=submit] {
	display: block;
	margin: 0;
	width: initial;
}

.user-message p {
	font-style: italic;
	font-size: var(--txt-lg);
	text-align: center;
}

p.updates {
	text-align: center;
}

.updates input[type=submit] {
	width: 40%;
}

.button {
	border-radius: var(--br);
	color: #fff;
	font-size: 1.1em;
	font-style: normal;
	font-weight: bold;
	padding: .5em 1em;
	text-decoration: none;
}

a.button:hover, a.button:focus {
	box-shadow: 0 2px .3em rgba(0,0,0, .5);
}

.primary {
	background-color: var(--dark-blue);
}

.delete {
	background-color: var(--dark-red);
}

.inactive {
	background-color: var(--mid-gray);
}

.big-btn {
	padding: .5em 3em;
}

.add-new::before {
	content: "+ ";
}

.next::after {
	content: " »";
}

.previous::before {
	content: "« ";
}

.admin-error {
	color: var(--dark-red);
	font-size: var(--txt-lg);
}

footer {
	text-align: center;
}

footer p {
	font-size: var(--txt-sm);
	font-style: italic;
	padding: 1em;
}

/* Tiny phone layout */
@media screen and (max-width: 374px) {

}

/* Modern phone layout */
@media screen and (min-width: 375px) {
	.flex-pages {
		display: flex;
		flex-direction: row;
		flex-flow: nowrap;
		justify-content: space-between;
		align-items: center;
	}
}

/* Tablet + Desktop layout */
@media screen and (min-width: 720px) {
	#wrapper {
		min-width: 720px;
		max-width: 1024px;
		margin-right: auto;
		margin-left: auto;
		width: 80%;
	}

	main {
		padding: 0 2em;
	}
	
	nav li {
		margin: 0;
	}

	aside {
		width: 25%;
		min-width: 13em;
		float: left;
	}
	
	aside figure {
		margin: 0 1.5em 1em 0;
	}
	
	aside:nth-child(even) {
		float: right;
	}
	
	aside:nth-child(even) figure {
		margin: 0 0 1.5em 1.5em;
	}
	
	.flex-admin {
		display: flex;
		flex-direction: row;
		flex-flow: wrap;
		justify-content: space-evenly;
	}
	
	.admin-card {
		flex-basis: 30%;
	}

	.search-card {
		flex-basis: 45%;
		padding: 1em 2em;
	}
	
	.member-bio {
		margin: 1em 1em 0;
	}

	.flex-form {
		display: flex;
		justify-content: space-between;
	}

	.flex-form p {
		width: 35%;
	}
	
	.flex-nav {
		display: flex;
		flex-direction: row;
		flex-flow: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	/* .updates input[type=submit] {
		max-width: 10rem;
	} */
	
	#login {
		display: flex;
		flex-direction: column;
		min-height: 25vh;
		justify-content: center;
		align-items: center;
	}
}