/*
	(c)2018 - visuallizard.com

	General Layout Styles.
	Sets major blocking to elements that appear accross the site in different templates.
	All can be removed and started from scratch or elemnts can be adjusted individually.
*/

.container {
/*
	Set site maximum width only here and use this class to centre the content in browser window.
	Use "max-width" instead of "width" for auto-responsivness.
*/

	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}



.site-header {
	display: block;
	position: relative;
	width: 100%;
	background: #f3e3d3;
}
.site-header.home {
	background: none;
}
	.site-header > .container {
		display: flex;
		position: relative;
		justify-content: flex-start;
		align-content: stretch;
		flex-wrap: wrap;
		column-gap: 2%;
	}
		.site-title {
			display: block;
			position: relative;
			flex-basis: 25%;
			max-width: 25%;
			padding: 0;
			margin: 0;
		}
			.site-title > a {
				display: block;
				position: relative;
				width: 100%;
				min-height: 100px;
				padding: 0;
				margin: 0;
				text-decoration: none;
				font-weight: 600;
				font-size: 30px;
				text-indent: -999em;
				background: url("../../../img/2023/logo-ccb.svg") no-repeat center center;
				background-size: contain;
			}
div.page-heading {
	border-top: 1px dotted #1c4535;
	background: #f3e3d3;
}
	div.page-heading h1 {
		margin-top: 3rem;
	}



/* Search Form */
.search-form {
	float: right;
	display: inline-flex;
	margin: .5em 0;
}
	.search-input {

	}
	.search-button {
		border-radius: 0;
	}



/* ! NAVIGATIONS  */

/* General for all levels and navs: */
.nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-item {
	position: relative;
	display: inline-block;
	display: block;
	vertical-align: top;
}
.nav-link {
	display: block;
	padding: 0.75rem;
	border-bottom: 2px solid transparent;
	color: inherit;
	text-decoration: none;

	line-height: 1.25;
	color: #1c4535;
}
.nav-link:hover {

}
.nav-item.has-active > .nav-link {

}
.nav-item.active > .nav-link {

}

	/* 	Main nav specific (opinionated) */
	.main-nav {
		display: flex;
		position: relative;
		justify-content: flex-end;
		align-items: center;
		flex-basis: 73%;
		max-width: 73%;
		padding: 0;
	}

	/* Level 1 (horizontal) */
	.main-nav .nav-1 {
		display: flex;
		position: relative;
		justify-content: flex-end;
		align-items: center;
		column-gap: 2%;
		width: 100%;
		margin-top: 1rem;
		font-size: 0.875rem;
		font-weight: 800;
		text-transform: uppercase;
	}
	.main-nav .nav-1 > li {

	}
	.main-nav .nav-1 > li > a {
		text-align: center;
	}
	.main-nav .nav-1 > li.nav-item[data-nav-status="active"] > a {
		border-bottom: 2px solid #c2382d;
	}

	/* all sub-lists (drop-downs & drop-sides) */
	.main-nav .sub-list {
		display: block;
		position: absolute;
		top: 0;
		left: auto;
		width: 260px;
		margin: 0;
		padding: 0;

		background-color: #fff;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 2px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		visibility: hidden; opacity: 0;
		transition: all .3s;
		z-index: 1000;
	}
	.main-nav li              > .sub-list {  }
	.main-nav li:hover        > .sub-list { visibility: visible; opacity: 1; }
	.main-nav li:focus-within > .sub-list { visibility: visible; opacity: 1; }

	.main-nav .sub-list .sub-list { left: 100%; }

	.main-nav :nth-last-child(1) > .nav-2,
	.main-nav :nth-last-child(2) > .nav-2 { right: 0; left: auto; }

	.main-nav :nth-last-child(1) > .nav-2 .nav-list,
	.main-nav :nth-last-child(2) > .nav-2 .nav-list { right: 100%; left: auto; }

	.main-nav :nth-last-child(1) > .nav-2 .has-sub > .nav-link::after,
	.main-nav :nth-last-child(2) > .nav-2 .has-sub > .nav-link::after {  }



	/* Level 2 (the only drop-down ) */
	.main-nav .nav-2 {
		top: 100%;
	}
	.main-nav .nav-2 > li {

	}
	.main-nav .nav-2 > li > a {
		padding: 15px;
	}
	.main-nav .nav-2 > li[data-nav-status="active"] > a {
		background: rgba(238,234,224,1);
	}

	/* Level 3, etc. */
	.main-nav .nav-3 {

	}
	.main-nav .nav-3 > li {

	}
	.main-nav .nav-3 > li > a {

	}




/* 	! SECTIONS	*/
main {

}
	main .container {
		display: flex;
		flex-direction: column;
		padding: 2rem 0;
	}
	.primary {
		width: 70%;
		padding: 0 2% 0 0;
	}
	.sidebar {
		width: 30%;
		padding: 0 0 0 2%;
		border-left: 1px solid #777;
	}

/* ![[Home page sections]] */
section#introduction {
	position: relative;
	margin-top: 3rem;
}

section#about {
	background: #f3e3d3;
}

section#statistics {
	background: #f3e3d3;
}

section#apply {
	background: #f3e3d3;
}

section#latest {
	background: #1c4535;
	color: #fbf1e3;
}
section#latest:before {
	content: "";
	display: block;
	position: relative;
	width: 100%;
	height: 200px;
	background: #1c4535;
}

section#key-dates {

}
section#key-dates:before {
	content: "";
	display: block;
	position: relative;
	width: 100%;
	height: 120px;
	background: url("../../../img/2023/bow-green.svg") repeat center bottom;
}

section#tradition {

}



#quicklinks {
	display: block;
	position: relative;
	width: 100%;
	padding: 60px 0;
	margin: 0;
	text-align: center;
}
	#quicklinks .container {
		display: flex;
		position: relative;
		justify-content: flex-start;
		flex-wrap: wrap;
		column-gap: 5%;
		row-gap: 1.25rem;
		padding: 0 60px;
	}
	#quicklinks .container .quicklink {
		display: block;
		position: relative;
		flex-basis: 30%;
		max-width: 30%;
		min-height: 200px;
		padding: 0;
		margin: 0;
		line-height: 0;
	}
		#quicklinks .container .quicklink a {
			display: block;
			position: absolute;
			bottom: 15px;
			width: 60%;
			padding: 10px 0;
			margin: 0 20%;
			border: 3px solid #fff;
			border-radius: 5px;
			font-size: 16px;
			font-weight: 600;
			text-align: center;
			line-height: 1;
			background: #666;
			color: #fff;
		}
		#quicklinks .container .quicklink#ql-donate a {
			border: 3px solid #c2382d;
			background: #fff;
			color: #c2382d;
		}
		#quicklinks .container .quicklink#ql-hamper a {
			border: 3px solid #fff;
			background: #c2382d;
			color: #fff;
		}
		#quicklinks .container .quicklink#ql-help a {
			border: 3px solid #1c4535;
			background: #fff;
			color: #1c4535;
		}



#help-ccb {
	display: block;
	position: relative;
	width: 100%;
	padding: 0 0 60px 0;
	margin: 0;
	text-align: center;
}
	#help-ccb h3 {
		font-weight: 300;
		text-transform: none;
		color: #1c4535;
	}
	#help-ccb a {
		color: #c2382d;
	}

#directors-message {
	display: block;
	position: relative;
	width: 100%;
	padding: 60px 0;
	margin: 0;
	background: #f8f5ed;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-image-source: url("../../img/border-red-green.png");
	border-image-slice: 100 0;
	border-image-repeat: repeat;
}






/* ! Site Footer  */
.site-footer {
	display: block;
	position: relative;
	width: 100%;
	background-color: #f0dfce;
	color: #000;
}
	.site-footer .container {
		display: flex;
		position: relative;
		justify-content: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		column-gap: 2%;
		row-gap: 1.25rem;
		padding: 5rem 0 2rem 0;
	}
		.site-footer .left-side {
			display: block;
			position: relative;
			flex-basis: 15%;
			max-width: 15%;
			padding: 0;
			margin: 0;
		}
			.site-footer .left-side .site-title {
				display: block;
				position: relative;
				max-width: 100%;
			}
			.site-footer .left-side .site-title > a {
				display: block;
				position: relative;
				width: 100%;
				height: 120px;
				padding: 0;
				margin: 0;
				text-decoration: none;
				font-weight: 600;
				font-size: 30px;
				text-indent: -9999em;
				background: url("../../../img/2023/logo-ccb-stack.svg") no-repeat left center;
				background-size: contain;
			}
		.site-footer .right-side {
			display: flex;
			position: relative;
			justify-content: flex-end;
			align-items: flex-start;
			flex-wrap: wrap;
			column-gap: 2%;
			row-gap: 0.625rem;
			flex-basis: 83%;
			max-width: 83%;
			padding: 0.75rem 0 0 0;
			margin: 0;
		}
		.site-footer .right-side nav.footer-nav {
			display: block;
			position: relative;
			flex-basis: 80%;
			max-width: 80%;
			margin: 0;
		}
			.site-footer .right-side nav.footer-nav ul.nav-1 {
				display: flex;
				position: relative;
				justify-content: space-between;
				width: 100%;
				padding: 0;
				margin: 0;
				text-transform: uppercase;
				font-size: 0.875rem;
				font-weight: 800;
			}
				.site-footer .right-side nav.footer-nav ul.nav-1 li {
					display: block;
					position: relative;
					flex-grow: 1;
					padding: 0;
				}
				.site-footer .right-side nav.footer-nav ul.nav-1 li:first-child {
					margin-left: -10px;
				}
					.site-footer .right-side nav.footer-nav ul.nav-1 li a {
						padding: 10px;
						letter-spacing: 0.1rem;
						color: #1c4535;
					}
					.site-footer .right-side nav.footer-nav ul.nav-1 li.nav-item.has-sub ul {
						display: none;
					}
		.site-footer .right-side ul.social {
			flex-basis: 18%;
			max-width: 18%;
		}
		.site-footer .right-side div.land-acknowledgement {  }
        .site-footer .right-side div.privacy-policy {  }
			.site-footer .right-side div.land-acknowledgement p,
            .site-footer .right-side div.privacy-policy p {
				font-size: 0.875rem;
				font-weight: 400;
				line-height: 1.5;
			}
		.site-footer .container p.copyright {
			display: block;
			position: relative;
			width: 100%;
			font-size: 0.875rem;
			font-weight: 500;
		}

/* ! Error Pages */
.code-404.error-header {
	font-size: 50px;
}
.code-404.error-code {
	font-size: 12px;
}