/*
Theme Name: Leather Link Studio
Description: Divi child theme for Leather Link Studio.
Author: Forcefield Web Development
Author URI: https://forcefieldnc.com
Template: Divi
Version: 1.0.0
Text Domain: leatherlinkstudio
*/


/* Divi's heading font setting is Times New Roman. Divi prints its Customizer CSS
   after this file, so each selector carries one extra element to win. On WooCommerce
   archives Divi switches to its CPT Customizer CSS, which scopes headings under
   #et-boc. Modules with their own font setting keep it. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body.et-db #et-boc .et-l h1,
body.et-db #et-boc .et-l h2,
body.et-db #et-boc .et-l h3,
body.et-db #et-boc .et-l h4,
body.et-db #et-boc .et-l h5,
body.et-db #et-boc .et-l h6 {
	font-family: 'Playfair Display', Georgia, serif;
}


/* Homepage hero. The workshop photo is busy, so the text carries its own shadow
   on top of the section's overlay. The headline inherits the heading font. */
.ff-hero {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.ff-hero .ff-hero__eyebrow {
	margin: 0 0 12px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

.ff-hero .ff-hero__title {
	margin: 0 0 16px;
	padding: 0;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.ff-hero .ff-hero__blurb {
	max-width: 560px;
	margin: 0 auto;
	padding: 0;
	font-size: 18px;
	line-height: 1.6;
	color: #fff;
}

@media (max-width: 768px) {
	.ff-hero .ff-hero__title {
		font-size: 38px;
	}

	.ff-hero .ff-hero__blurb {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.ff-hero .ff-hero__eyebrow {
		font-size: 12px;
		letter-spacing: .1em;
	}

	.ff-hero .ff-hero__title {
		font-size: 30px;
	}

	.ff-hero .ff-hero__blurb {
		font-size: 15px;
	}
}


/* Main nav dropdown. Divi's Customizer settings render it as 12px light uppercase
   grey on the same cream as the header. Anchored on #main-header to outrank the
   Customizer CSS, which prints after this file. */
#main-header #top-menu li ul {
	width: 260px;
	padding: 8px 0;
	background-color: #fff;
	border-top: 3px solid #851e26;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

#main-header #top-menu li li {
	padding: 0;
	line-height: 1.4;
}

#main-header #top-menu li li + li {
	border-top: 1px solid #efece3;
}

#main-header #top-menu li li a {
	display: block;
	width: auto;
	padding: 11px 24px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: #3b3530;
	transition: background-color .15s, color .15s;
}

#main-header #top-menu li li a:hover,
#main-header #top-menu li li a:focus-visible,
#main-header #top-menu li li.current-menu-item > a {
	background-color: #f7f5ee;
	color: #851e26;
	opacity: 1;
}