/************************
FONT INCLUDES - Google or Adobe Font @import
*************************/

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");

/************************
SET BASE THEME COLORS HERE -- CUSTOM VARIABLES
these are used here and in the nld-color.css file
*************************/
:root {
	/*theme and brand colors*/
	--primary: #9C1B2F;
	--secondary: #818882;
	--tertiary: #D4B58E;
	
	/*general colors*/
	--dark: #000;
	--light: #fff;
	
	/*ui elements*/
	--danger: #8B0A0C;
	--warning: #FFCF28;
	--success: #338c39;
	--info: #bbbbbb;
}


/************************
BODY
*************************/
body {
	font-family: "Instrument Sans", helvetica, sans-serif;
	font-style: normal;
	font-size: 1rem;
	background: #FAF7F3;
	overflow-y: none;
}

::selection { /*text selection*/
	background: color-mix(in srgb, var(--tertiary), black 40%)!important;
	color: #fff;
}


/*************************
HEADINGS AND FONTS
**************************/
h1, .h1 { /*only use for page titles*/
	font-family: "Cormorant Garamond", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3.25rem;
}

h2, .h2 {
	font-family: "Cormorant Garamond", serif;
	font-weight: 400;
	font-style: italic;
	font-size: 2.25rem;
}

h3, .h3 {
	font-family: "Cormorant Garamond", serif;
	font-weight: 400;
	font-style: italic;
}

h4, .h4 {
	font-family: "Instrument Sans", helvetica, sans-serif;
	font-weight: 600;
	font-size: 1.35rem;
}

h5, .h5 {
	font-family: "Instrument Sans", helvetica, sans-serif;
	font-weight: 600;
	font-size: 1.2rem;
}

h6, .h6 {
	font-family: "Instrument Sans", helvetica, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	font-size: 0.75rem;
}

.text-serif {
	font-family: "Cormorant Garamond", serif;
}

.text-sans-serif {
	font-family: "Instrument Sans", helvetica, sans-serif;
}

.lead { /*slightly larger text used for intro paragraphs*/
	font-size: 1.2rem;
	line-height: 1.7rem;
	font-weight: normal;
}

.small { /*small text used for asides or footnotes*/
	font-size: 0.9rem;
	line-height: 1.2rem;
	font-weight: normal;
}

blockquote:before {
	content: '“';
	display: block;
	color: var(--primary);
	font-family: "Instrument Sans", helvetica, sans-serif;
	font-style: normal;
	font-size: 5rem;
	line-height: 1rem;
}

blockquote { /*used for pullquotes in articles*/
	font-family: "Cormorant Garamond", serif;
	font-size: 1.6rem;
	line-height: 1.9rem;
	font-style: italic;
	text-align: center;
	max-width: 450px;
	margin: 3rem auto 2rem auto;
}

figure {
	
}

	figure img {
		max-width: 100%;
		height: auto;
	}

	figcaption {
		font-style: italic;
		color: var(--secondary);
		margin: 0.5rem 0;
	}
	
address {
	margin-bottom: 0.25rem;
}

/**************************
LINKS AND BUTTONS
***************************/
/*** default links ***/	
a {
	transition: 0.3s;
	color: inherit;
}

	a:hover {
		color: var(--primary);
	}
	
	a:active, a:focus {
		color: var(--primary);
	}

/*** default button ***/	
.btn, button {
	background: var(--primary);
	border-color: var(--primary);
	border-width: 2px;
	color: var(--light);
	transition: 0.3s;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	font-weight: 500;
	letter-spacing: 0.05rem;
	padding: 0.7rem;

}

	.btn:hover {
		background: var(--primary);
		border-color: var(--primary);
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
		color: var(--light);
	}
	
	.btn:active, .btn:focus {
		border-color: inherit;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	}
	
	.btn:focus-visible {
		border-color: inherit;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	}
	
	.btn-primary:focus svg, .btn-outline-primary:focus svg {
		fill: #fff!important;
	}

/*** additional button styles are in nld-color.css ***/

/***************************
WEBFORMS
****************************/
.form-control, .form-select {
	border-color: var(--dark)!important;
	border-width: 0px;
	border-bottom-width: 2px;
	background: #ECEFEC;
	padding: 0.7rem;
	transition: 0.3s;
}

	.form-control:focus, .form-select:focus {
		background: #F2EFEA;
		border-bottom-width: 2px;
		border-color: var(--tertiary)!important;
		box-shadow: 0 0 0 0;
	}
	
.form-check-input {
	border-color: var(--dark)!important;
	border-width: 2px;
	padding: 7px;
}
	
	.form-check-input:checked {
	  background-color: var(--tertiary);
	  border-color: color-mix(in srgb, var(--tertiary), black 80%)!important;
	}

	.form-check-input:focus {
		border-color: var(--primary);
		box-shadow: 0 0 0 .25rem rgba(0,0,0,0);
	}
	
	.form-check-input:checked[type="radio"] {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='000'/%3e%3c/svg%3e");
	}
	
	.form-check-input:checked[type="checkbox"] {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
	}

label {
	font-weight: 500;
}

/*** default form validations ***/
.form-control.is-valid, .was-validated .form-control:valid {
	border-color: var(--success);
}

/*************************
DESIGN ELEMENTS / HELPER CLASSES
**************************/
hr {
	background-color: var(--primary);
	border-color: var(--primary);
	opacity: 1;
	height: 3px;
	max-width: 50px;
}

/*** vertical heights, usually set on rows ***/
.vh-25 {
	min-height: 25vh;
}

.vh-50 {
	min-height: 50vh;
}

.vh-75 {
	min-height: 75vh;
}

/*** background + semi-transparent overlay ***/
.background { /* applied to parent div with background image */
	position:relative;
}

.text-overlay { /* applied to first child div with text */
	z-index: 3;
	position: relative;
}

.bg-dark-overlay { /* applied to second child div to add gradient/overlay to parent image*/
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	background: var(--dark);
	opacity: 0.2;
}

.bg-dark-overlay-gradient {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(255,255,255,0) 100%);
}

/***************************
CARDS - https://getbootstrap.com/docs/5.3/components/card/
****************************/
.card {
	color: inherit;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

	.card:hover {
		transition: all 0.3s ease-in-out;
		box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
	}

	.card:hover .card-img {
		transform: scale(1.1);
		transition: all 0.3s ease-in-out;
	}

	.card-img-overlay {
		top: auto;
		left: 15px;
		right: 15px;
		bottom: 15px;
		padding: 0;
		z-index: 3;
	}
	
	.card .bg-dark-overlay-gradient {
		border-radius: 10px;
	}
	
	.card-link {
		color: inherit;
		text-decoration: none;
	}

	.card:hover svg {
		fill: var(--tertiary)!important;
	}
	
/***************************
LIST GROUPS - https://getbootstrap.com/docs/5.3/components/list-group/
****************************/
.list-group {

}

.list-group-item {
	border-bottom: 1px solid color-mix(in srgb, var(--secondary), white 30%);
	background: 0;
	padding-left: 0;
	transition: 0.3s;
}

	.list-group-item a {
		text-decoration: none;
	}
	
	.list-group-item:hover {
		padding-left: 5px;
	}

.list-group-item.active {
	background: var(--primary);
	border-color: var(--primary);
	box-shadow: none;
}
	
/***************************
ACCORDIONS - https://getbootstrap.com/docs/5.3/components/accordion/
****************************/
.accordion-button {
	background: color-mix(in srgb, var(--primary), black 30%)!important;
	border-color: color-mix(in srgb, var(--primary), black 30%)!important;
	color: #fff;
	font-family: "Instrument Sans", helvetica, sans-serif;
}

.accordion-button:focus {
	box-shadow: 0 0 0 .25rem rgba(0,0,0,.25)
}

.accordion-button:not(.collapsed) {
	background: color-mix(in srgb, var(--primary), black 60%)!important;
	color: #fff;
}

	.accordion-button.collapsed::after, .accordion-button:not(.collapsed)::after { /*icon*/
	  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	}
	
.accordion-item { /*body*/
	
}
	
/***************************
PAGINATION (used for views) - https://getbootstrap.com/docs/5.3/components/pagination
****************************/
.pagination .page-item {
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

.pagination .page-link {
	color: inherit;
	padding: 10px 15px;
}

.pagination .page-item.active a {
	background: var(--primary)!important;
	border-color: var(--primary)!important;
}

.page-link:focus {
	box-shadow: 0 0 0 .25rem rgba(0,0,0,.25)
}

/***************************
NAV LINKS (for tabs/pills/etc)
****************************/
.nav .nav-link {
	color: inherit;
}

.nav-pills .nav-link.active {
	background: var(--primary)!important;
}

/***************************
NAVIGATION
****************************/
.navbar {
	background: var(--light);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

.navbar .container {
	justify-content: space-evenly;
}

.custom-nav .nav-item {
	padding: 0 0.5rem;
}

.nav-link {
	font-weight: 500;
	letter-spacing: 0.05rem;
	transition: 0.3s;
}

/***************************
FOOTER
****************************/
footer {
}

.footer-links ul {
	list-style-type: none;
	margin: 0.5rem 0;
	padding: 0;
}

	.footer-links ul li {
		margin: 0;
		display: block;
		width: 100%;
	}

	.footer-links ul li svg {
		fill: var(--tertiary);
		margin-right: 5px;
		max-width: 15px;
	}

	.footer-links ul li p {
		display: inline-block;
	}
	
	.footer-links ul li a {
		font-weight: 500;
		text-decoration: none;
	}

/***************************
HEADERS
****************************/
.home-header {
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.video-overlay { /*overlays video*/
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
}

	.video-overlay video { /*positions video to fill area on all screen sizes*/
		min-width: 100%; 
		min-height: 100%;
	}
	
.home-header .text-overlay {
	position: absolute;
	bottom: 2rem;
	top: auto;
	left: 0;
	right: 0;
}

.interior-header {
	border-radius: 10px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

	.interior-header-overlay {
		background: #FAF7F3;
		border-radius: 10px;
		border-top: 5px solid var(--primary);
		margin-top: -5rem;
	}
	
.contact-img {
	background: url(../img/contact-img.jpg) no-repeat center center;
	background-size: cover;
	min-height: 100vh;
}

	@media only screen and (max-width: 811px) {
		.contact-img {
			min-height: 50vh;
		}
	}