@import "_normalize.css";

:root {
	--duration: .25s;
	--base-unit: 16px;

	--dark-gold: #6F4625;
	--light-gold: #D9B38B;
	--midnight:  #1E2E3F;
	--dark-grey: #717171;
	--blue: #0074E8;

	--specter-100: #f4f7f9;
	--specter-300: #e6edf2;
	--specter-500: #dbe5ec;

	--error: #e74c3c;
	--success: #2ecc71;


	--shadow: 0 1px 2px rgba(0,0,0,0.05),
	0 2px 4px rgba(0,0,0,0.05),
	0 4px 8px rgba(0,0,0,0.05),
	0 8px 16px rgba(0,0,0,0.05),
	0 16px 32px rgba(0,0,0,0.05),
	0 32px 64px rgba(0,0,0,0.05);

	--shadow-long: 0 2px 1px rgba(0,0,0,0.03),
	0 4px 2px rgba(0,0,0,0.03),
	0 8px 4px rgba(0,0,0,0.03),
	0 16px 8px rgba(0,0,0,0.03),
	0 32px 16px rgba(0,0,0,0.03);

}

/* ---------------------------------------------------
::General
-----------------------------------------------------*/

::-moz-selection { 
	color: var(--midnight);
	background: var(--light-gold);
}

::selection {
	color: var(--midnight);
	background: var(--light-gold);
}

html {
	box-sizing: border-box;
}

*, 
*:before, 
*:after {
	box-sizing: inherit;
}

*,
*:after,
*:before {
	transition-timing-function: cubic-bezier(0.69, 0, 0, 1) !important;
	animation-timing-function: cubic-bezier(0.69, 0, 0, 1) !important;
}

html, body {
	min-height: 100%;
}

html {
	font-size: 62.5%;
	font-synthesis: none;
	-moz-font-feature-settings: 'kern';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	direction: ltr;
	text-align: left;
	scroll-behavior: smooth;

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}
	}
}


body {
	font-size: 1.8rem;
	line-height: 1.47059;
	font-weight: 400;
	letter-spacing: -.022em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	background: #f7f7f7 url(../images/body-bg.png) no-repeat;
	background-attachment: fixed;
	background-position: bottom right;
	color: var(--dark-grey);
	min-width: 380px;
}

main {
	min-height: 100%;
	min-height: 100vh;
	padding: 0 calc(var(--base-unit)*2);
}

@media (max-width: 600px) {

	main {
		padding: 0 var(--base-unit);
	}		

}


/* ---------------------------------------------------
::Typography
-----------------------------------------------------*/

h1,
h2,
h3 {
	font-weight: 500;
	font-family: 'Times New Roman', Times, serif;
	padding: 0;
	margin: 0;
	color: var(--midnight);
	color: #000;
}

h1 {
	font-size: 5rem;
}

h2 {
	font-size: 4rem;
}

h3 {
	font-size: 3rem;
}

h4 {
	margin: 0;
	font-size: 2rem;
	color: #000;
	font-family: 'Inter', "SF Pro Text","SF Pro Icons","Helvetica","Arial",sans-serif;
}


@media (max-width: 960px) {

	body {
		font-size: 1.6rem;
	}
	
	h1 {
		font-size: 4rem;
	}

	h2 {
		font-size: 3rem;
	}

	h3 {
		font-size: 2rem;	
	}

	a,
	a:hover,
	a:visited {
		font-size: 1.6rem;
		color: var(--dark-gold);
		text-decoration: none;
	}

}

p {
	padding: 0;
	margin: 0;
}

address {
	text-decoration: none;
	font-style: normal;
}

a,
a:hover,
a:visited {
	font-size: 1.8rem;
	color: var(--dark-gold);
	text-decoration: none;
}

/* ---------------------------------------------------
::Hero
-----------------------------------------------------*/

header.hero {
	position: relative;
	padding: 64px 8px;
	width: 100%;
	background: #000 url(../images/behind-the-judges-bench.jpeg) no-repeat center;
	background-size: cover;
	border: 1px solid transparent;
}

/* header.hero.hero--josiah {
	background: #000 url(../images/josiah-court.jpg) no-repeat center -180px;
} */

header.hero:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.85);
	z-index: 100;
}

header.hero nav.navigation {
	position: relative;
	z-index: 200;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

header.hero h1 {
	color: #fff;
	text-align: center;
	margin: 64px auto 0 auto;
	max-width: 900px;
}

/* ---------------------------------------------------
::Navigation
-----------------------------------------------------*/

header.hero nav.navigation ul {
	margin: 0;
	padding: 0;
  list-style-type: none;
  font-size: 0px;
  display: flex;
	flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

header.hero nav.navigation ul li {
  text-align: left;
  font-size: 1.4rem;
  padding: 0;
  margin: 0 var(--base-unit);
}

header.hero nav.navigation ul li a {
	color: #fff;
	font-weight: 600;
	font-size: 1.8rem;
}

header.hero nav.navigation ul li a:hover,
header.hero nav.navigation ul li.active a {
	color: var(--dark-gold);
}

header.hero nav.navigation ul li img {
	width: 100%;
	max-width: 200px;
	height: auto;
}

@media (max-width: 1290px) {

	header.hero h1 {
		margin: calc(var(--base-unit)*2) auto 0 auto;
	}

	
	header.hero nav.navigation ul li img {
		width: 100%;
		max-width: 150px;
		height: auto;
	}
}

@media (max-width: 1130px) {

	header.hero nav.navigation ul li a {
		font-size: 1.6rem;
	}
}


@media (max-width: 1050px) {

	header.hero {
		padding: calc(var(--base-unit)*2) calc(var(--base-unit)/2);
	}

	header.hero nav.navigation ul li.logo {
		order: -1;
		flex: 1 0 100%;
		text-align: center;
		padding: 0 0 var(--base-unit) 0;
	}
}

@media (max-width: 865px) {
	
	header.hero {
		padding: 24px calc(var(--base-unit)/2);
	}

	header.hero nav.navigation ul li {
		margin-bottom: calc(var(--base-unit)/4);
	}

	header.hero nav.navigation ul li:last-child {
		margin-bottom: 0;
	}

}

/* ---------------------------------------------------
::Home 
-----------------------------------------------------*/

/* Welcome */

.home .welcome {
	max-width: 1200px;
	margin: 128px auto 64px auto;
	display: grid;
	grid-template-columns: minmax(200px, 350px) 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: var(--base-unit);
	grid-row-gap: 0px;
}

.home .welcome .photo {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.home .welcome .about {
	padding: calc(var(--base-unit)*4);
}

.home .welcome .about h2 {
	margin-bottom: 16px;
}

.home .welcome .about p {
	margin-bottom: 16px;
}

@media (max-width: 1250px) {
	
	.home .welcome .about {
		padding: calc(var(--base-unit)*2);
	}

}

@media (max-width: 1024px) {

	.home .welcome {
		margin: 64px auto;
		grid-template-columns: minmax(200px, 300px) 1fr;	
	}
	
	.home .welcome .photo img {
		top: -60px;
		max-width: 250px;
	}

	.home .welcome .photo h3 {
		padding: 24px;
	}

}

@media (max-width: 932px) {

	.home .welcome .photo img {
		top: auto;
		bottom: 80px;
	}

}

@media (max-width: 880px) {
	
	.home .welcome {
		grid-template-columns: minmax(100px, 200px) 1fr;	
		grid-column-gap: 0px;
	}

}

@media (max-width: 650px) {

	.home .welcome .about,
	.home .welcome .photo {
		grid-column: 1/-1;
	}

	.home .welcome .photo {
		border-top-left-radius: 4px;
    border-top-right-radius: 4px;
		border-bottom-left-radius: 0px;
	}

	.home .welcome .photo h3 {
		border-bottom-left-radius: 0px;
	}

}

.home .video {
	max-width: 1200px;
	margin: calc(var(--base-unit)*4) auto;
	display: grid;
	grid-template-columns: 1fr;
}

.home .video .video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.home .video .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


@media (max-width: 600px) {

	.home .video {
		margin: calc(var(--base-unit)*2) auto;
	}

}


/* ---------------------------------------------------
::Practice Areas
-----------------------------------------------------*/

.practice-areas h4 {
	display: block;
	color: #000;
	margin-bottom: var(--base-unit);
}

.practice-areas p {
	margin-bottom: var(--base-unit);
}

/* ---------------------------------------------------
::Case Results and Client Testimonials
-----------------------------------------------------*/

.case-results.cols,
.client-testimonials.cols {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-column-gap: calc(var(--base-unit)*3); 
	justify-items: center;
}

.case-results.cols div.card:nth-child(even),
.client-testimonials.cols div.card:nth-child(even) {
	justify-self: right;
}

.case-results.cols div.card:nth-child(odd),
.client-testimonials.cols div.card:nth-child(odd) {
	justify-self: left;
}

.card--result,
.card--testimonial {
	padding: calc(var(--base-unit)*2);
	max-width: 500px;
}

.card--testimonial {
	position: relative;
}

.card--result h3,
.card--testimonial h3 {
	position: relative;
	font-size: 2.4rem;
	line-height: 1.2;
	font-family: 'Inter', "SF Pro Text","SF Pro Icons","Helvetica","Arial",sans-serif;
	display: block;
	margin-bottom: calc(var(--base-unit)*2);
}

.card--result h3:before {
	content: '';
	position: absolute;
	top: 0;
	left: -32px;
	height: 100%;
	width: 2px;
	background: var(--dark-gold);
}

.card--testimonial h3 {
	padding-left: 88px;
}

.card--testimonial .quote {
	position: absolute;
	top: 0;
	left: 0;
	height: 64px;
	width: 64px;
	background: #000 url("data:image/svg+xml,%3Csvg width='24' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.91a5.454 5.454 0 1 0 5.564-5.453 7.61 7.61 0 0 1 5.345-2.184V0C4.884 0 0 4.884 0 10.909ZM24 0c-6.025 0-10.909 4.884-10.909 10.91a5.455 5.455 0 1 0 5.564-5.453A7.61 7.61 0 0 1 24 3.273V0Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
	border-radius: 40px;
}

.card--result p,
.card--testimonial p {
	margin-bottom: var(--base-unit);
}

@media (max-width: 915px) {

	.case-results.cols div.card:nth-child(even),
	.client-testimonials.cols div.card:nth-child(even) {
		justify-self: inherit;
	}

	.case-results.cols div.card:nth-child(odd),
	.client-testimonials.cols div.card:nth-child(odd) {
		justify-self: inherit;
	}

}

@media (max-width: 500px) {

	.case-results.cols,
	.client-testimonials.cols {
  	grid-template-columns: 1fr;
	}
	
}

/* ---------------------------------------------------
::About
-----------------------------------------------------*/

main.about {
	max-width: 1200px;
	margin: calc(var(--base-unit)*4) auto;
	display: grid;
	grid-template-columns: 400px 1fr;
	grid-column-gap: calc(var(--base-unit)*4);
}

main.about .bio h1 {
	margin: 0 0 calc(var(--base-unit)*2) 0;
}

main.about .bio p {
	margin: 0 0 calc(var(--base-unit)*2) 0;
}

main.about .aside h4 {
	display: block;
	color: #000;
	margin-top: calc(var(--base-unit)*2);
	font-size: 1.8rem;
}

main.about .aside .photo {
	margin-top: 100px;
}

main.about .aside ul li {
	font-size: var(--base-unit);
}

main.about .aside b {
	color: #000;
}

@media (max-width: 965px) {
	
	main.about {
		grid-template-columns: 320px 1fr;
		margin: calc(var(--base-unit)*2) auto;	
		grid-column-gap: calc(var(--base-unit)*2);
	}

}

@media (max-width: 800px) {
	
	main.about {
		grid-template-columns: 280px 1fr;
	}
	
}

@media (max-width: 768px) {
	
	main.about {
		grid-template-columns: 1fr;
	}
	
}

/* ---------------------------------------------------
::Practice Areas
-----------------------------------------------------*/

main.practice-areas {
	margin: calc(var(--base-unit)*4) auto;
	max-width: 1200px;
	display: grid;
  grid-template-columns: 1fr;
	grid-row-gap: calc(var(--base-unit)*2);
	grid-column-gap: calc(var(--base-unit)*4); 	
}

main.practice-areas h1.lead {
	grid-column: 1/-1;
	grid-row: 1;
	width: 100%;
}

main.practice-areas h4 {
	display: block;
	margin-bottom: var(--base-unit);
	color: #000;
}

main.practice-areas p {
	margin-bottom: var(--base-unit);
}

/* ---------------------------------------------------
::Media
-----------------------------------------------------*/

main.media {
	grid-template-columns: 1fr;
	grid-column-gap: var(--base-unit);
	grid-row-gap: var(--base-unit); 
	grid-auto-rows: minmax(min-content, max-content);
}

main.media .lead {
	margin-bottom: calc(var(--base-unit)*2);
}

main.media ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

main.media ul li {
	margin: var(--base-unit) 0;
	max-width: 800px;
}

main.media ul li.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

main.media ul li.video  video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------
::Contact
-----------------------------------------------------*/

main.contact {
	grid-column-gap: var(--base-unit);
	grid-row-gap: var(--base-unit); 
	grid-auto-rows: minmax(min-content, max-content);
}

main.contact .lead {
	margin-bottom: calc(var(--base-unit)*2);
}

main.contact section {
	padding: calc(var(--base-unit)*2); 
	padding-left: calc(var(--base-unit)*4);
	min-height: 100px;
	display: flex;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}

section.phone {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.675 12.817a9.536 9.536 0 0 1-2.942-.467.814.814 0 0 0-.841.2l-1.309 1.642c-2.358-1.125-4.566-3.25-5.741-5.692l1.625-1.383a.85.85 0 0 0 .2-.85A9.294 9.294 0 0 1 7.2 3.325a.832.832 0 0 0-.825-.825H3.492c-.45 0-.992.2-.992.825C2.5 11.067 8.942 17.5 16.675 17.5c.592 0 .825-.525.825-.983v-2.875a.832.832 0 0 0-.825-.825Z' fill='%238F6234'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 24px center;
}

section.email {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.667 3.333H3.333c-.916 0-1.658.75-1.658 1.667l-.008 10c0 .917.75 1.667 1.666 1.667h13.334c.916 0 1.666-.75 1.666-1.667V5c0-.917-.75-1.667-1.666-1.667Zm0 3.334L10 10.833 3.333 6.667V5L10 9.167 16.667 5v1.667Z' fill='%238F6234'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 24px center;
}

section.email a {
	display: block;
}

section.address {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.667A5.83 5.83 0 0 0 4.167 7.5C4.167 11.875 10 18.333 10 18.333s5.833-6.458 5.833-10.833A5.83 5.83 0 0 0 10 1.667Zm0 7.916a2.084 2.084 0 1 1 .002-4.168A2.084 2.084 0 0 1 10 9.583Z' fill='%238F6234'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 24px center;
}

/* ---------------------------------------------------
::Footer
-----------------------------------------------------*/

footer {
	margin-top: 100px;
	color: #fff;
	background: #000;
}

footer ul.quick-links {
	margin: 0 auto;
	padding: var(--base-unit);
	max-width: 1200px;
  list-style-type: none;
  font-size: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

footer ul.quick-links li {
  text-align: left;
  font-size: var(--base-unit);
  padding: 0 0 0 32px;
  margin: 0 var(--base-unit);
}

footer ul.quick-links li.phone {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.675 12.817a9.536 9.536 0 0 1-2.942-.467.814.814 0 0 0-.841.2l-1.309 1.642c-2.358-1.125-4.566-3.25-5.741-5.692l1.625-1.383a.85.85 0 0 0 .2-.85A9.294 9.294 0 0 1 7.2 3.325a.832.832 0 0 0-.825-.825H3.492c-.45 0-.992.2-.992.825C2.5 11.067 8.942 17.5 16.675 17.5c.592 0 .825-.525.825-.983v-2.875a.832.832 0 0 0-.825-.825Z' fill='%238F6234'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
}

footer ul.quick-links li.email {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.667 3.333H3.333c-.916 0-1.658.75-1.658 1.667l-.008 10c0 .917.75 1.667 1.666 1.667h13.334c.916 0 1.666-.75 1.666-1.667V5c0-.917-.75-1.667-1.666-1.667Zm0 3.334L10 10.833 3.333 6.667V5L10 9.167 16.667 5v1.667Z' fill='%238F6234'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
}

footer ul.quick-links li.address {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.667A5.83 5.83 0 0 0 4.167 7.5C4.167 11.875 10 18.333 10 18.333s5.833-6.458 5.833-10.833A5.83 5.83 0 0 0 10 1.667Zm0 7.916a2.084 2.084 0 1 1 .002-4.168A2.084 2.084 0 0 1 10 9.583Z' fill='%238F6234'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
}

/* li.consultation {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.667 2.167H3.333c-.916 0-1.666.75-1.666 1.666v15L5 15.5h11.667c.916 0 1.666-.75 1.666-1.667v-10c0-.916-.75-1.666-1.666-1.666Z' fill='%238F6234'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
} */

footer ul.quick-links li a {
	color: #fff;
}

footer ul.quick-links li:last-child {
	flex-basis: 100%;
	text-align: center;
	font-size: 1.4rem;
	padding: var(--base-unit) 0;
}

@media (max-width: 960px) {

	footer ul.quick-links li,
	footer ul.quick-links li a {
		font-size: 1.4rem;
	}

  footer ul.quick-links li {
    margin: calc(var(--base-unit)/2);
  }

}
/* ---------------------------------------------------
::Misc/Helper Classes
-----------------------------------------------------*/

.card {
	background: #fff;
	border-radius: calc(var(--base-unit)/4);
	border: 1px solid var(--specter-300);
	box-shadow: var(--shadow-long);
}

.photo {
	min-height: 400px;
	position: relative;
	background: #111111;
}

.photo img {
	width: 100%;
	max-width: 300px;
	height: auto;
	position: absolute;
	right: 0;
	top: -100px;
	z-index: 100;
}

.photo h3 {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	padding: 32px;
	background: #000;
	color: #fff;
	z-index: 200;
	border-bottom-left-radius: 4px;
}

.photo h3 small {
	display: block;
	text-transform: uppercase;
	line-height: 1.47059;
	font-weight: 400;
	font-size: 1.6rem;
	letter-spacing: -.022em;
	font-family: 'Inter', "SF Pro Text","SF Pro Icons","Helvetica","Arial",sans-serif;
}

.cols {
	margin: calc(var(--base-unit)*4) auto;
	max-width: 1200px;
	display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	grid-row-gap: calc(var(--base-unit)*2);
	grid-column-gap: calc(var(--base-unit)*4); 
}

.lead {
	grid-column: 1/-1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	flex-wrap: wrap;
}

.lead h2 small {
	display: block;
	color: var(--dark-grey);
	font-size: 18px;
	font-family: 'Inter', "SF Pro Text","SF Pro Icons","Helvetica","Arial",sans-serif;
}

@media (max-width: 600px) {

	.cols {
		margin: calc(var(--base-unit)*2) auto;
	}

	.lead {
		display: block;
	}

}