/*
Theme Name:  Waldo's Wares Child
Theme URI:   https://waldoswares.com
Description: Child theme for Waldo's Wares built on Storefront
Author:      Brandon Waldo
Author URI:  https://waldoswares.com
Template:    storefront
Version:     1.0.0
Text Domain: waldoswares-child
*/

/* =========================================================
   CSS CUSTOM PROPERTIES
   ========================================================= */
:root {
	--dark-ember:   #2A2520;
	--warm-ivory:   #F5E6D0;
	--amber-rust:   #C47A2A;
	--burnt-walnut: #6B3D22;
	--antique-bone: #E6D5BE;

	--font-display:  'Cinzel Decorative', serif;
	--font-heading:  'Cinzel', serif;
	--font-body:     'Cormorant Garamond', serif;
}

/* =========================================================
   GLOBAL RESETS
   ========================================================= */
body {
	background-color: var(--dark-ember) !important;
	color: var(--warm-ivory) !important;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--warm-ivory) !important;
	font-weight: 600;
}

a {
	color: var(--amber-rust) !important;
}

a:hover {
	color: var(--antique-bone) !important;
}

/* Override Storefront Customizer inline styles */
.site,
.hentry,
.storefront-full-width-content .entry-content,
.storefront-full-width-content .entry-summary {
	background-color: var(--dark-ember) !important;
}

.entry-content,
.entry-summary,
p {
	color: var(--warm-ivory) !important;
}

/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */
.site-header,
.storefront-sticky-add-to-cart {
	background-color: var(--dark-ember) !important;
	border-bottom: 1px solid var(--burnt-walnut);
}

.site-title a,
.site-header .site-title a:visited {
	color: var(--warm-ivory) !important;
	font-family: var(--font-display);
}

.main-navigation ul li a,
.site-header-cart .cart-contents {
	color: var(--warm-ivory) !important;
	font-family: var(--font-heading);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.main-navigation ul li a:hover {
	color: var(--amber-rust) !important;
}

.main-navigation ul ul {
	background-color: #1e1a16;
	border: 1px solid var(--burnt-walnut);
}

/* =========================================================
   BUTTONS
   ========================================================= */
button,
.button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--amber-rust) !important;
	color: var(--dark-ember) !important;
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: none;
	border-radius: 2px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: var(--burnt-walnut) !important;
	color: var(--warm-ivory) !important;
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--burnt-walnut) !important;
	color: var(--warm-ivory) !important;
}

.button.alt:hover,
.woocommerce a.button.alt:hover {
	background-color: var(--amber-rust) !important;
	color: var(--dark-ember) !important;
}

/* =========================================================
   FORMS
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
	background-color: #1e1a16 !important;
	color: var(--warm-ivory) !important;
	border: 1px solid var(--burnt-walnut) !important;
	border-radius: 2px;
	font-family: var(--font-body);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--amber-rust) !important;
	outline: none;
	box-shadow: 0 0 0 2px rgba(196, 122, 42, 0.2);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
	color: var(--antique-bone);
	opacity: 0.6;
}

label {
	color: var(--antique-bone);
	font-family: var(--font-heading);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
	background-color: #1e1a16 !important;
	color: var(--antique-bone);
	border-top: 1px solid var(--burnt-walnut);
}

.site-footer a {
	color: var(--antique-bone);
}

.site-footer a:hover {
	color: var(--amber-rust);
}

.site-footer .widget-title {
	color: var(--warm-ivory);
	font-family: var(--font-heading);
}

/* =========================================================
   DECORATIVE DIVIDER
   ========================================================= */
.ww-divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px 0;
}

.ww-divider::before,
.ww-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--amber-rust);
	opacity: 0.6;
}

.ww-divider span {
	color: var(--amber-rust);
	font-size: 18px;
}