/*
Theme Name: Storefront Christmas
Theme URI: https://uglychristmassweater.store
Description: Festive child theme for Ugly Christmas Sweater Store - evergreen, cranberry and gold, with a fair-isle knit motif.
Author: Ugly Christmas Sweater Store
Template: storefront
Version: 1.0.5
Text Domain: storefront-christmas
*/

:root {
	--ucs-evergreen: #0e3b2e;
	--ucs-evergreen-dark: #082a20;
	--ucs-cranberry: #b3202c;
	--ucs-cranberry-dark: #8d1922;
	--ucs-gold: #c9a227;
	--ucs-cream: #fbf7f0;
	--ucs-snow: #ffffff;
	--ucs-ink: #23201d;
}

/* ---------- Base ---------- */
body {
	background-color: var(--ucs-cream);
	color: var(--ucs-ink);
}

.site-content {
	background-color: var(--ucs-cream);
}

/* Snowy texture, kept very light so it never fights the products. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(255,255,255,.9) 1.5px, transparent 1.6px),
		radial-gradient(circle at 68% 42%, rgba(255,255,255,.75) 1.8px, transparent 1.9px),
		radial-gradient(circle at 34% 76%, rgba(255,255,255,.8) 1.4px, transparent 1.5px);
	background-size: 340px 340px, 460px 460px, 400px 400px;
	opacity: .55;
}

.site {
	position: relative;
	z-index: 1;
}

/* ---------- Fair-isle knit band ---------- */
/* Rendered as part of the header so it sits flush, not in a content gap. */
.site-header::after {
	content: "";
	display: block;
	height: 18px;
	margin: 1.2em -9999px -1.2em;
	background-color: var(--ucs-cranberry);
	background-image:
		repeating-linear-gradient(45deg,  var(--ucs-cream) 0 9px, transparent 9px 18px),
		repeating-linear-gradient(-45deg, var(--ucs-gold)  0 9px, transparent 9px 18px);
	background-size: 36px 36px;
	border-top: 3px solid var(--ucs-gold);
}

/* ---------- Header ---------- */
.site-header {
	background-color: var(--ucs-evergreen) !important;
	padding-top: 1.4em;
	padding-bottom: 1.2em;
}

.site-header,
.site-header a:not(.button),
.site-branding .site-title a,
.site-header .site-description {
	color: var(--ucs-cream) !important;
}

.site-branding .site-title a {
	font-family: "Mountains of Christmas", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 1.5em;
	line-height: 1.1;
	white-space: nowrap;
	letter-spacing: .5px;
	text-shadow: 0 2px 0 rgba(0,0,0,.25);
}

.site-branding .site-title a::before {
	content: "\2744";
	color: var(--ucs-gold);
	margin-right: .35em;
	font-family: inherit;
}

.site-header .site-description {
	opacity: .85;
	font-style: italic;
	margin-top: .35em;
	font-size: .95em;
}

/* ---------- Navigation ---------- */
.main-navigation ul li a,
.secondary-navigation ul li a {
	color: var(--ucs-cream) !important;
	font-weight: 600;
	letter-spacing: .3px;
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a {
	color: var(--ucs-gold) !important;
}

.main-navigation ul.menu > li.current-menu-item > a {
	color: var(--ucs-gold) !important;
	border-bottom: 2px solid var(--ucs-gold);
}

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
	background-color: var(--ucs-evergreen-dark);
}

/* ---------- Headings ---------- */
h1, h2, h3,
.page-title,
.entry-title,
.woocommerce-loop-product__title {
	color: var(--ucs-evergreen);
}

h1.entry-title,
.page-title,
h1.woocommerce-products-header__title {
	font-family: "Mountains of Christmas", Georgia, serif;
	font-weight: 700;
}

/* ---------- Buttons ---------- */
.button,
button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .product_type_external {
	background-color: var(--ucs-cranberry) !important;
	color: #fff !important;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: .3px;
	padding: .78em 1.6em;
	border: 2px solid var(--ucs-cranberry-dark);
	box-shadow: 0 2px 0 var(--ucs-cranberry-dark);
	transition: transform .12s ease, background-color .12s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .product_type_external:hover {
	background-color: var(--ucs-evergreen) !important;
	border-color: var(--ucs-evergreen-dark);
	box-shadow: 0 2px 0 var(--ucs-evergreen-dark);
	transform: translateY(-1px);
}

/* External products leave the site, so hint at it. */
.woocommerce .product_type_external::after {
	content: " \2197";
	font-weight: 700;
}

/* ---------- Products ---------- */
.woocommerce ul.products li.product {
	background: var(--ucs-snow);
	border: 1px solid rgba(14,59,46,.12);
	border-radius: 10px;
	padding: 1em;
	box-shadow: 0 2px 6px rgba(14,59,46,.07);
	transition: transform .15s ease, box-shadow .15s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(14,59,46,.14);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ucs-cranberry);
	font-weight: 700;
}

.woocommerce span.onsale {
	background-color: var(--ucs-gold);
	color: var(--ucs-evergreen-dark);
	font-weight: 700;
	border-radius: 999px;
}

.storefront-sorting,
.woocommerce-pagination {
	background: transparent;
}

/* ---------- Footer ---------- */
.site-footer {
	background-color: var(--ucs-evergreen-dark) !important;
	color: #dfe9e2 !important;
	border-top: 4px solid var(--ucs-gold);
}

.site-footer a {
	color: var(--ucs-gold) !important;
}

.site-footer h1, .site-footer h2, .site-footer h3 {
	color: #fff;
}

.ucs-affiliate-disclosure {
	color: #cfdbd4;
	border-top: 1px dashed rgba(255,255,255,.25);
	margin-top: 1em;
}

.ucs-affiliate-disclosure a {
	color: var(--ucs-gold) !important;
}

/* ---------- Accessibility ---------- */
a:focus,
button:focus,
.button:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 3px solid var(--ucs-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* Tighten the gap Storefront leaves above the first content block. */
.site-content .col-full {
	padding-top: 1.6em;
}

@media (max-width: 768px) {
	.site-branding .site-title a {
		font-size: 1.15em;
		white-space: normal;
	}

	.site-header {
		padding-top: 1em;
		padding-bottom: .8em;
	}
}

/* The front page leads with its own hero heading, so the page title is noise. */
.home.page .entry-header .entry-title {
	display: none;
}

/* ---------- Header search (FiboSearch) ---------- */
.site-header .site-search {
	/* Storefront pins this column to 21.74%, which clipped the placeholder. */
	width: 32%;
	max-width: none;
}

.site-header .site-search .dgwt-wcas-search-wrapp {
	max-width: none;
	width: 100%;
	margin-left: auto;
}

/* FiboSearch's own rule is highly specific, so match its shape to win. */
.site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	font-size: 14px;
	padding-top: .5em;
	padding-bottom: .5em;
	height: auto;
}