/**
 * Autumn / Thanksgiving seasonal skin (light touch).
 * Every rule is scoped to html.autumn, which autumn.js adds. Both files are
 * only included when Admin > Configuration > Layout Settings > Seasonal Theme
 * is "autumn" (see jscript/jscript_zz_seasonal_theme.php).
 */

/* ---------- page background ---------- */
html.autumn body {
	background: #f3e2c7 linear-gradient(180deg, #f7ead6 0%, #ecd3ad 100%) fixed !important;
}
html.autumn .body-bg.shadow-wrp {
	box-shadow: 0 0 24px rgba(139, 69, 19, .3);
	border-top: 4px solid #c0571b;
}

/* ---------- top tab navigation ---------- */
html.autumn #top_nav {
	background: #5a3418 !important;
	border-bottom: 3px solid #e3a32b;
}
html.autumn #tab_nav li,
html.autumn #tab_nav li a {
	background-image: none !important;
	background-color: transparent;
}
html.autumn #tab_nav li {
	border-right: 1px solid #7a4a26;
	background-color: #5a3418 !important; /* covers tabs that wrap onto a 2nd row */
}
html.autumn #tab_nav li a {
	color: #fbe3b0 !important;
}
html.autumn #tab_nav li:hover,
html.autumn #tab_nav li.tab_active {
	background-color: #c0571b !important;
}
html.autumn #tab_nav li:hover a,
html.autumn #tab_nav li.tab_active a {
	color: #fff !important;
}

/* ---------- sidebox headings ---------- */
html.autumn .sidebox-header-left,
html.autumn h3.leftBoxHeading,
html.autumn h3.rightBoxHeading {
	background: #6b3e1f !important;
	color: #fbe3b0 !important;
}
html.autumn .sidebox-header-left {
	border-bottom: 2px solid #e3a32b;
}
/* the Categories box has its own ID-level image rule in stylesheet.css */
html.autumn #categories .sidebox-header-left,
html.autumn #categories .sidebox-header-left h3,
html.autumn #vertcategoriescss .sidebox-header-left,
html.autumn #vertcategoriescss .sidebox-header-left h3 {
	background: #6b3e1f !important;
	text-shadow: none;
}
html.autumn #categories .sidebox-header-left,
html.autumn #vertcategoriescss .sidebox-header-left {
	border-bottom: 2px solid #e3a32b;
}
html.autumn h3.leftBoxHeading a,
html.autumn h3.rightBoxHeading a {
	color: #ffd27a !important;
}
html.autumn h3.leftBoxHeading::before,
html.autumn h3.rightBoxHeading::before {
	content: "\1F342\00a0"; /* fallen leaf */
}
html.autumn .sideBoxContent {
	border-color: #e6c393 !important;
}
html.autumn .category-top:hover,
html.autumn .sideBoxContent a:hover {
	color: #c0571b !important;
}

/* ---------- center boxes / notices ---------- */
html.autumn .note,
html.autumn .note-mixedcart {
	background: #fff8ec !important;
	border: 2px solid #c0571b !important;
	box-shadow: 0 2px 8px rgba(139, 69, 19, .2);
}
html.autumn h2.centerBoxHeading {
	background: #6b3e1f !important;
	color: #fbe3b0 !important;
	border-color: #e3a32b !important;
}
html.autumn .centerBoxWrapper.carousel-box {
	border-color: #e6c393;
}
html.autumn #navBreadCrumb {
	background: #fbefdc !important;
	border-left: 4px solid #c0571b;
}

/* ---------- buttons ---------- */
html.autumn .cssButton,
html.autumn .cssButtonHover {
	background: #c0571b !important;
	border-color: #6b3e1f !important;
	color: #fff !important;
}
html.autumn .cssButton:hover,
html.autumn .cssButtonHover:hover {
	background: #6b3e1f !important;
	color: #ffd27a !important;
}

/* ---------- footer ---------- */
html.autumn #footer {
	border-top: 4px solid #c0571b;
}

/* ================= falling leaves (built by the JS) ================= */
.au-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 9000;
}
/* outer element falls straight down; inner one sways and spins */
.au-leaf {
	position: absolute;
	top: -60px;
	animation: au-fall linear infinite;
}
.au-leaf svg {
	display: block;
	width: var(--size, 26px);
	height: var(--size, 26px);
	opacity: .9;
	filter: drop-shadow(1px 2px 1px rgba(60, 30, 10, .25));
}
.au-leaf .au-sway {
	animation: au-sway var(--sway, 4s) ease-in-out infinite alternate;
}
@keyframes au-fall {
	from { transform: translateY(0); }
	to   { transform: translateY(calc(100vh + 120px)); }
}
@keyframes au-sway {
	0%   { transform: translateX(calc(var(--drift, 40px) * -1)) rotate(-35deg); }
	50%  { transform: translateX(0) rotate(15deg); }
	100% { transform: translateX(var(--drift, 40px)) rotate(60deg); }
}

@media (max-width: 767px) {
	.au-leaf:nth-child(n+7) { display: none; }
}