/*	INIT - DEFINE CSS VARIABLES  */

/* Import various Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
*/



:root {
	/* DEFAULTS */
		--default-font-size: 12pt;
		--default-max-width: 800px;
		--default-font-family: Roboto, Arial, sans-serif;
		--default-mobile-width: 700px;
		--default-font-weight: 300;

	/* Mobile Width */
		--mobilewidth: var(--default-mobile-width);

	/* Main Colors */
		--color01: #003366;	/* Primary color  */
		--color02: #C0281B;	/* Secondary Color */
		--color03: #336633;	/* 3rd color */
		--color04: #5C4033;	/* 4th color */
		--color05: #e0e0e0;	/* 5th color */
		--color06: #f5bf03;	/* 6th color */
		--color07: #e0e0e080;	/* 7th color */
		--color08: #404040;	/* 8th color */
		--primary-text-color: black;
		--primary-background: #fff;
		--color-even: #00336610;
		--color-odd: clear;
		--radius-default: 10px;

	/* Menu */
		--menu-text-color: var(--color01);
		--menu-text-color-hover: var(--color02);
		--menu-text-background-hover: clear;
		--menu-background: clear;
		--menu-outline: 0px solid var(--color01);
		--menu-text-weight: bold;
		--menu-text-size: var(--default-font-size);
		--menu-font-family: var(--default-font-family);


	/* Headings */
		--h1-color: var(--color08);
		--h1-weight: bold;

		--h2-color: var(--color08);
		--h2-weight: bold;

		--h3-color: var(--color08);
		--h3-weight: bold;

		--h4-color: var(--color08);
		--h4-weight: bold;

		--h5-color: var(--color08);
		--h5-weight: bold;

		--h6-color: var(--color08);
		--h6-weight: bold;

	/* Terminal */
		--terminal-background: #333;
		--terminal-text: #80ff80;
		--terminal-font-family: Source Code Pro;
		--terminal-font-size: 90%;
}


html { 
	color-scheme: normal;
}
body { 
	max-width: var(--default-max-width);
	margin: 0px auto;
	padding: 10px;
	font-family: var(--default-font-family);
	font-weight: var(--default-font-weight);
	font-size: var(--default-font-size);
	color: var(--primary-text-color);
	background: var(--primary-background);
}


hr {
	border: 0px;
	border-top: 1px solid silver;
}

/* 
	Basic Menu Styles 
*/
	nav {
		background-color: #333;
		/* color: white; */
		padding: 0;
		margin: 0;
	}

	nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex; /* For horizontal menu */
	}

	nav li {
		position: relative;
	}

	nav a {
		display: block;
		color: white;
		text-decoration: none;
		padding: 14px 16px;
	}

	nav a:hover {
		background-color: #555;
	}

	/* Submenu Styles */
	.submenu {
		display: none;
		position: absolute;
		background-color: #444;
		min-width: 160px;
		z-index: 1;
		left: 0; /* Position relative to parent LI */
	}

	.submenu a {
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		color: white;
	}

	.submenu a:hover {
		background-color: #666;
	}

	nav li:hover .submenu {
		display: block; /* Show submenu on hover */
	}

	/* Mobile Menu Styles */
	.mobile-menu {
		display: none;
		cursor: pointer;
		padding: 10px;
	}

	.bar {
		width: 25px;
		height: 3px;
		background-color: white;
		margin: 5px 0;
	}

	@media screen and (max-width: 600px) {
		nav ul {
			display: none;
			flex-direction: column; /* Vertical menu on mobile */
			width: 100%;
			position: absolute;
			top: 50px; /* Adjust as needed */
			left: 0;
			background-color: #333;
		}

		nav ul.show {
			display: flex;
		}

		nav li {
			width: 100%;
			text-align: left;
		}

		.submenu {
			position: static;
			display: none;
			width: 100%;
		}

		nav li:hover .submenu, nav li.active .submenu {
			display: none;
		}

		nav li.active .submenu{
			display: block;
		}

		.mobile-menu {
			display: block;
		}
	}

H1 { color: var(--h1-color); font-weight: var(--h1-weight); }
H2 { color: var(--h2-color); font-weight: var(--h2-weight); }
H3 { color: var(--h3-color); font-weight: var(--h3-weight); }
H4 { color: var(--h4-color); font-weight: var(--h4-weight); }
H5 { color: var(--h5-color); font-weight: var(--h5-weight); } 
H6 { color: var(--h6-color); font-weight: var(--h6-weight); }

pre {
	color: var(--terminal-text);
	background: var(--terminal-background);
	font-family: var(--terminal-font-family);
	font-size: var(--terminal-font-size);
	unicode-bidi: embed;
	padding: 10px;
	border-radius: var(--radius-default);
	white-space: pre-wrap;
	word-wrap: break-word;
/*	overflow-x: scroll;	*/
}

.event_row {
	display: block;
	padding: 10px;
}
/*
.event_row:nth-child(even) {
	background-color: var(--color-even);
}
.event_row:nth-child(odd) {
	background-color: var(--color-odd);
}
*/

a.event-link {
	color: var(--primary-text-color);
	text-decoration: none;
	display: block;
}

a.event-link:hover {
	background-color: var(--color07);
	border-left: #808080 solid 3px;
	margin-left: -7px;
	padding-left: 4px;
}





a.detail {
	color: var(--color02);
	text-decoration: none;
}
.detail_name {
	font-size: 200%;
	color: var(--color02);
	font-weight: bold;
}
.detail_dates {
	font-size: 150%;
	padding-top: 20px;
}
.detail_splash {
	font-style: italic;
}
.detail_details {
	padding-top: 20px;
	word-break: break-word;
;
}

.pickup, .droppoff {
	margin-top: 20px;
	padding-top: 10px;	
	padding-bottom: 10px;
	display: inline-block;
	width: 48%;
	text-align: center;
	vertical-align: top;
	background: #eee;
	border-radius: var(--radius-default);
}


/*
Changes above for mobile and/or small screens
*/

@media screen and (max-width: 650px) {
	body {
		font-size: 120%;
	}

	pre {
		font-size: 70%;
		margin: 10px;
		overflow-x: scroll;
	}
	.event_countd {
		width:50px;
	}
	.pickup, .droppoff {
		width: 90%;
		margin: 10px;
		font-size: 90%;
	}
		
}