/*
Theme Name:   SkellyFit
Theme URI:    https://skellyfit.com/
Description:  Child theme of Twenty Seventeen for SkellyFit — outfits, accessories and display ideas for the 12-foot skeleton. Includes Amazon Associates product cards ([skelly_product]) that automatically apply your tracking ID.
Author:       SkellyFit
Template:     twentyseventeen
Version:      1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  skellyfit
Tags:         blog, dark, halloween, affiliate
*/

/* ==========================================================================
   Palette
   ========================================================================== */

:root {
	--sf-night: #14101f;
	--sf-night-2: #1e1830;
	--sf-night-3: #2a2242;
	--sf-bone: #f2ead6;
	--sf-bone-dim: #c9bfa8;
	--sf-pumpkin: #ff7a1a;
	--sf-pumpkin-dark: #d95f00;
	--sf-slime: #9be564;
	--sf-line: rgba(242, 234, 214, 0.14);
	--sf-radius: 10px;
}

/* ==========================================================================
   Base
   ========================================================================== */

body.skellyfit,
body.skellyfit .site,
body.skellyfit .site-content-contain,
body.skellyfit .navigation-top,
body.skellyfit .site-footer {
	background-color: var(--sf-night);
	color: var(--sf-bone);
}

body.skellyfit .site-content-contain {
	background-image: radial-gradient(ellipse at top, rgba(255, 122, 26, 0.06), transparent 60%);
}

body.skellyfit h1,
body.skellyfit h2,
body.skellyfit h3,
body.skellyfit h4,
body.skellyfit .entry-title,
body.skellyfit .entry-title a,
body.skellyfit .page-title,
body.skellyfit .widget-title {
	color: var(--sf-bone);
}

body.skellyfit .entry-content a,
body.skellyfit .entry-summary a,
body.skellyfit .widget a,
body.skellyfit .site-info a {
	color: var(--sf-pumpkin);
	-webkit-box-shadow: inset 0 -1px 0 rgba(255, 122, 26, 0.5);
	box-shadow: inset 0 -1px 0 rgba(255, 122, 26, 0.5);
}

body.skellyfit .entry-content a:hover,
body.skellyfit .entry-content a:focus,
body.skellyfit .widget a:hover {
	color: var(--sf-bone);
	-webkit-box-shadow: inset 0 -2px 0 var(--sf-pumpkin);
	box-shadow: inset 0 -2px 0 var(--sf-pumpkin);
}

body.skellyfit .entry-meta,
body.skellyfit .entry-meta a,
body.skellyfit .entry-footer,
body.skellyfit .posted-on a,
body.skellyfit .cat-links,
body.skellyfit .tags-links {
	color: var(--sf-bone-dim);
}

body.skellyfit hr,
body.skellyfit .entry-footer,
body.skellyfit .site-footer,
body.skellyfit .navigation-top,
body.skellyfit .post-navigation,
body.skellyfit .widget ul li {
	border-color: var(--sf-line);
}

/* ==========================================================================
   Header
   ========================================================================== */

body.skellyfit .site-title,
body.skellyfit .site-title a {
	font-family: "Creepster", "Libre Franklin", sans-serif;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--sf-bone);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.8);
}

body.skellyfit .site-title {
	font-size: 2.6rem;
}

@media screen and (min-width: 48em) {
	body.skellyfit .site-title {
		font-size: 4rem;
	}
}

body.skellyfit .site-description {
	color: var(--sf-bone);
	opacity: 0.9;
	font-weight: 600;
	letter-spacing: 0.04em;
}

body.skellyfit .navigation-top {
	border-top: 1px solid var(--sf-line);
	border-bottom: 1px solid var(--sf-line);
}

body.skellyfit .navigation-top a,
body.skellyfit .menu-toggle,
body.skellyfit .dropdown-toggle {
	color: var(--sf-bone);
}

body.skellyfit .navigation-top a:hover,
body.skellyfit .main-navigation li li:hover > a,
body.skellyfit .main-navigation .current-menu-item > a {
	color: var(--sf-pumpkin);
}

body.skellyfit .main-navigation ul ul {
	background: var(--sf-night-2);
	border-color: var(--sf-line);
}

/* ==========================================================================
   Posts
   ========================================================================== */

body.skellyfit .sticky .icon-thumb-tack {
	fill: var(--sf-pumpkin);
}

body.skellyfit .blog .entry-title a:hover,
body.skellyfit .archive .entry-title a:hover {
	color: var(--sf-pumpkin);
}

body.skellyfit .entry-content blockquote {
	color: var(--sf-bone-dim);
	border-left: 3px solid var(--sf-pumpkin);
	padding-left: 1em;
}

body.skellyfit .sf-tip {
	background: var(--sf-night-2);
	border: 1px dashed var(--sf-pumpkin);
	border-radius: var(--sf-radius);
	padding: 1em 1.25em;
	margin: 1.5em 0;
}

body.skellyfit .sf-tip strong:first-child {
	color: var(--sf-pumpkin);
}

/* ==========================================================================
   Affiliate disclosure
   ========================================================================== */

.skelly-disclosure {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--sf-bone-dim);
	background: var(--sf-night-2);
	border-left: 3px solid var(--sf-pumpkin);
	border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
	padding: 0.75em 1em;
	margin: 0 0 1.75em;
}

/* ==========================================================================
   Product cards — [skelly_product]
   ========================================================================== */

.skelly-product {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 1.25em;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	background: var(--sf-night-2);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	padding: 1.25em;
	margin: 1.5em 0;
	-webkit-transition: border-color 0.2s ease, -webkit-transform 0.2s ease;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.skelly-product:hover {
	border-color: rgba(255, 122, 26, 0.55);
}

.skelly-product__media {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 120px;
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--sf-night-3);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

body.skellyfit .entry-content a.skelly-product__media,
body.skellyfit .entry-content a.skelly-product__media:hover {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.skelly-product__media img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
	background: #fff;
}

.skelly-product__media svg {
	width: 64px;
	height: 64px;
	fill: var(--sf-bone-dim);
	opacity: 0.7;
}

.skelly-product__body {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

.skelly-product__badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-night);
	background: var(--sf-slime);
	border-radius: 999px;
	padding: 0.2em 0.75em;
	margin-bottom: 0.5em;
}

body.skellyfit .entry-content .skelly-product__title {
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sf-bone);
	margin: 0 0 0.35em;
	padding: 0;
}

.skelly-product__desc {
	font-size: 0.9375rem;
	color: var(--sf-bone-dim);
	margin: 0 0 0.9em;
}

body.skellyfit .entry-content a.skelly-product__button,
a.skelly-product__button {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--sf-night);
	background: var(--sf-pumpkin);
	border-radius: 999px;
	padding: 0.6em 1.3em;
	text-decoration: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: background 0.2s ease;
	transition: background 0.2s ease;
}

body.skellyfit .entry-content a.skelly-product__button:hover,
body.skellyfit .entry-content a.skelly-product__button:focus,
a.skelly-product__button:hover {
	color: var(--sf-night);
	background: var(--sf-bone);
	-webkit-box-shadow: none;
	box-shadow: none;
}

@media screen and (max-width: 30em) {
	.skelly-product {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.skelly-product__media {
		width: 100%;
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
		height: 120px;
	}
}

/* ==========================================================================
   Buttons, forms, widgets
   ========================================================================== */

body.skellyfit button,
body.skellyfit input[type="submit"],
body.skellyfit input[type="button"] {
	background: var(--sf-pumpkin);
	color: var(--sf-night);
	border-radius: 999px;
}

body.skellyfit button:hover,
body.skellyfit input[type="submit"]:hover,
body.skellyfit input[type="submit"]:focus {
	background: var(--sf-bone);
	color: var(--sf-night);
}

body.skellyfit input[type="text"],
body.skellyfit input[type="email"],
body.skellyfit input[type="search"],
body.skellyfit input[type="url"],
body.skellyfit textarea {
	background: var(--sf-night-2);
	border-color: var(--sf-line);
	color: var(--sf-bone);
}

body.skellyfit .search-form .search-submit .icon {
	fill: var(--sf-night);
}

/* ==========================================================================
   Footer
   ========================================================================== */

body.skellyfit .site-footer {
	border-top: 1px solid var(--sf-line);
}

body.skellyfit .site-info {
	font-size: 0.8125rem;
	color: var(--sf-bone-dim);
	line-height: 1.6;
}

body.skellyfit .site-info p {
	margin: 0 0 0.5em;
}

body.skellyfit .social-navigation a {
	background-color: var(--sf-night-3);
}

body.skellyfit .social-navigation a:hover {
	background-color: var(--sf-pumpkin);
}