/*
Theme Name: Chic Seekers Crafted
Theme URI: https://chicseekerscrafted.com
Author: Chic Seekers Crafted
Description: A western-boho block theme built for Chic Seekers Crafted. Turquoise, leather brown and cream, with a woodtype display face and a script accent. Made for a WooCommerce shop selling custom patch trucker hats and 3D prints.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chic-seekers-crafted
Tags: block-patterns, full-site-editing, e-commerce, custom-colors, custom-logo, wide-blocks
*/

/* Nearly all of the look lives in theme.json. What is here is the handful of
   things theme.json cannot express: the sticky header, the rope divider, card
   hover states, and a few WooCommerce touch ups. */

/* ---------- header ---------- */

.csc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgba( 43, 24, 13, 0.1 );
	backdrop-filter: blur( 8px );
}

.admin-bar .csc-header {
	top: 32px;
}

@media ( max-width: 782px ) {
	.admin-bar .csc-header {
		top: 46px;
	}
}

.csc-header .wp-block-site-logo img {
	height: 52px;
	width: auto;
}

.csc-header .wp-block-navigation a:hover {
	color: var( --wp--preset--color--primary );
}

/* The tagline under the wordmark, set in the script face. */
.csc-wordmark-script {
	font-family: var( --wp--preset--font-family--script );
	color: var( --wp--preset--color--primary );
	line-height: 1;
	margin-top: 2px;
}

/* ---------- rope divider ---------- */

.csc-rope {
	height: 12px;
	background: repeating-linear-gradient(
		115deg,
		var( --wp--preset--color--accent ) 0 6px,
		#efd9be 6px 11px,
		var( --wp--preset--color--accent-deep ) 11px 14px
	);
	border-top: 2px solid var( --wp--preset--color--secondary );
	border-bottom: 2px solid var( --wp--preset--color--secondary );
}

/* ---------- wood grain ---------- */

.csc-wood {
	background-image:
		linear-gradient( 90deg, rgba( 139, 88, 59, 0.05 ) 0 2px, transparent 2px 7px ),
		linear-gradient( 90deg, rgba( 139, 88, 59, 0.035 ) 0 1px, transparent 1px 13px );
}

/* ---------- eyebrow label ---------- */

.csc-eyebrow {
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --wp--preset--color--primary );
}

.has-primary-dark-background-color .csc-eyebrow,
.has-secondary-deep-background-color .csc-eyebrow,
.has-secondary-background-color .csc-eyebrow {
	color: var( --wp--preset--color--primary-light );
}

/* ---------- cards ---------- */

.csc-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.csc-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --wp--preset--shadow--lifted );
}

.csc-tier .wp-block-heading {
	min-height: 2.6em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.csc-price {
	font-family: var( --wp--preset--font-family--display );
	font-size: 2.4rem;
	line-height: 1;
	color: var( --wp--preset--color--primary );
}

.csc-popular {
	position: relative;
}

.csc-popular::before {
	content: "Most popular";
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX( -50% );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base-light );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------- misc ---------- */

.csc-script {
	font-family: var( --wp--preset--font-family--script );
	color: var( --wp--preset--color--primary );
}

.csc-fineprint .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: center;
}

.csc-fineprint .wp-block-list li {
	background: rgba( 253, 248, 240, 0.09 );
	border: 1px solid rgba( 203, 231, 230, 0.22 );
	padding: 7px 15px;
	border-radius: 999px;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	margin: 0;
}

.csc-step-number {
	width: 62px;
	height: 62px;
	margin: 0 auto;
	border-radius: 999px;
	display: grid;
	place-items: center;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.4rem;
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base-light );
}

/* ---------- WooCommerce ---------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var( --wp--preset--font-family--body );
	font-weight: 700;
	font-size: var( --wp--preset--font-size--medium );
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var( --wp--preset--color--primary );
	font-family: var( --wp--preset--font-family--display );
}

.woocommerce span.onsale {
	background: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--base-light );
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 11px;
	padding: 4px 12px;
	min-height: 0;
	min-width: 0;
	line-height: 1.6;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base-light );
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var( --wp--preset--font-size--x-small );
	padding: 0.9rem 1.6rem;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var( --wp--preset--color--primary-dark );
	color: var( --wp--preset--color--base-light );
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	border-top-color: var( --wp--preset--color--primary );
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
	color: var( --wp--preset--color--primary );
}

/* Woo's mini cart in the header. */
.wp-block-woocommerce-mini-cart {
	line-height: 1;
}

/* ---------- accessibility ---------- */

:where( a:focus-visible ),
:where( button:focus-visible ),
:where( input:focus-visible ),
:where( select:focus-visible ),
:where( textarea:focus-visible ) {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

.skip-link:focus {
	background: var( --wp--preset--color--base-light );
	color: var( --wp--preset--color--contrast );
	padding: 12px 20px;
	z-index: 200;
}