/*
Theme Name:   Ilocos Emporium
Theme URI:    https://ilocosemporium.com
Description:  Child theme of Storefront for Ilocos Emporium — a Filipino heritage commerce platform. Warm, heritage-forward visual language across five departments (Jewelry, Plants, Books, Beauty, Home Goods & Decor) with the windmill mark as a recurring brand element.
Author:       Ilocos Emporium
Template:     storefront
Version:      1.0.0
Text Domain:  ilocosemporium-child
*/

:root {
	--ie-cream: #EDE8DC;
	--ie-espresso: #2C1A0E;
	--ie-terracotta: #C0392B;
	--ie-font-heading: "Cormorant Garamond", Georgia, serif;
	--ie-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
	background-color: var(--ie-cream);
	color: var(--ie-espresso);
	font-family: var(--ie-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title {
	font-family: var(--ie-font-heading);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ie-espresso);
}

a {
	color: var(--ie-terracotta);
}

a:hover,
a:focus {
	color: var(--ie-espresso);
}

.site-header {
	background-color: var(--ie-cream);
	border-bottom: 1px solid rgba(44, 26, 14, 0.12);
}

/* Single-row header: logo left, nav centered, search + cart grouped right.
   See ie_unify_header() in functions.php, which keeps branding, search,
   nav, and cart inside one .col-full container instead of Storefront's
   default two stacked rows. */
@media (min-width: 768px) {
	.site-header > .col-full {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 1.5rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.site-header .site-branding {
		order: 1;
		flex: 0 0 auto;
		margin: 0;
	}

	.site-header .main-navigation {
		order: 2;
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
	}

	.site-header .main-navigation ul.menu,
	.site-header .main-navigation > div.menu > ul {
		display: flex;
		justify-content: center;
	}

	.site-header .site-search {
		order: 3;
		flex: 0 0 auto;
		margin: 0;
		max-width: 220px;
	}

	.site-header #site-header-cart {
		order: 4;
		flex: 0 0 auto;
	}
}

/* Departments dropdown */
.main-navigation ul.sub-menu,
.main-navigation .menu .sub-menu {
	background-color: var(--ie-cream);
	border: 1px solid rgba(44, 26, 14, 0.18);
	min-width: 220px;
	box-shadow: 0 8px 20px rgba(44, 26, 14, 0.12);
}

.main-navigation ul.sub-menu a,
.main-navigation .menu .sub-menu a {
	text-transform: none;
	letter-spacing: normal;
	font-family: var(--ie-font-heading);
}

.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--ie-terracotta);
	color: var(--ie-cream);
	border-radius: 0;
	font-family: var(--ie-font-heading);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--ie-espresso);
	color: var(--ie-cream);
}

/* Windmill divider used between sections — see inc/template-tags.php ie_windmill_divider() */
.ie-windmill-divider {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2.5em 0;
	opacity: 0.85;
}

.ie-windmill-divider img,
.ie-windmill-divider svg {
	width: 2.5rem;
	height: 2.5rem;
}

/* Department landing pages */
.ie-department-hero {
	background-color: var(--ie-cream);
	color: var(--ie-espresso);
	padding: 1.25rem 2rem;
	text-align: center;
	border-top: 1px solid var(--ie-terracotta);
	border-bottom: 1px solid var(--ie-terracotta);
}

.ie-department-hero h1 {
	color: var(--ie-espresso);
	font-size: 1.5rem;
	margin: 0;
}

.ie-department-hero .ie-department-description {
	margin: 0.5rem 0 0;
	font-family: var(--ie-font-body);
	text-transform: none;
	letter-spacing: normal;
}

.ie-department-articles {
	background-color: rgba(44, 26, 14, 0.04);
	padding: 2rem;
	margin: 2rem 0;
}