/*
Theme Name: Cowboy Star Signs Child
Theme URI: https://cowboystarsigns.com
Description: "Midnight Rodeo" redesign for Cowboy Star Signs — a child theme of Crio (BoldGrid). Restyles the WooCommerce storefront with a night-sky western aesthetic. Presentation only; products, cart, and checkout are untouched.
Author: David / Cowboy Star Signs
Template: crio
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
License: GNU General Public License v2 or later
Text Domain: cowboystarsigns-child
*/

/* ==========================================================================
   DESIGN TOKENS  —  retune the whole site by editing these values.
   ========================================================================== */
:root {
	/* Midnight Rodeo palette */
	--css-night:      #0d1330;  /* deep night-sky background        */
	--css-night-2:    #141b3d;  /* raised panels / cards            */
	--css-night-3:    #1d2650;  /* hover / borders on dark          */
	--css-cream:      #f3ead4;  /* parchment — primary text on dark */
	--css-cream-dim:  #c9c0aa;  /* muted parchment                  */
	--css-gold:       #e6b04a;  /* star gold — primary accent       */
	--css-gold-deep:  #c8902f;  /* gold pressed/hover               */
	--css-rust:       #b9532c;  /* burnt leather — secondary accent */
	--css-rust-deep:  #97401f;
	--css-star:       #fffdf3;  /* near-white star highlight        */
	--css-line:       rgba(243,234,212,.14); /* hairline on dark     */

	/* Type */
	--css-display: "Rye", "Georgia", serif;          /* western brand */
	--css-head:    "Oswald", "Arial Narrow", sans-serif; /* UI / titles */
	--css-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Shape & depth */
	--css-radius:   10px;
	--css-shadow:   0 14px 34px rgba(0,0,0,.45);
	--css-shadow-sm:0 4px 14px rgba(0,0,0,.30);
}

/* ==========================================================================
   GLOBAL CANVAS
   ========================================================================== */
body,
body.woocommerce,
body.woocommerce-page {
	background-color: var(--css-night) !important;
	/* faint starfield: tiny radial dots over the night sky */
	background-image:
		radial-gradient(1.5px 1.5px at 20% 30%,  rgba(255,253,243,.55), transparent),
		radial-gradient(1.5px 1.5px at 75% 18%,  rgba(255,253,243,.40), transparent),
		radial-gradient(1.5px 1.5px at 42% 72%,  rgba(255,253,243,.45), transparent),
		radial-gradient(1.5px 1.5px at 88% 64%,  rgba(255,253,243,.35), transparent),
		radial-gradient(2px   2px   at 60% 42%,  rgba(230,176,74,.45),  transparent),
		radial-gradient(1px   1px   at 12% 84%,  rgba(255,253,243,.40), transparent);
	background-attachment: fixed !important;
	color: var(--css-cream) !important;
	font-family: var(--css-body) !important;
	-webkit-font-smoothing: antialiased;
	line-height: 1.65;
}

/* Keep text readable across Crio's neutral wrappers */
p, li, td, th, dd, dt,
.entry-content, .site-content,
.woocommerce, .woocommerce-page {
	color: var(--css-cream);
}

a {
	color: var(--css-gold);
	text-decoration: none;
	transition: color .15s ease;
}
a:hover, a:focus {
	color: var(--css-star);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .widget-title {
	font-family: var(--css-head) !important;
	color: var(--css-cream) !important;
	letter-spacing: .02em;
	line-height: 1.15;
	text-transform: uppercase;
}

h1, .page-title { font-weight: 700; }

/* The brand / hero gets the true western face */
.site-title,
.site-title a,
.bgtfw-site-title,
.custom-logo-link + .site-title {
	font-family: var(--css-display) !important;
	color: var(--css-gold) !important;
	text-transform: none !important;
	letter-spacing: .01em;
	text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 22px rgba(230,176,74,.25);
}

/* Section headings get a small star flourish */
.woocommerce-products-header__title,
.product-category h2,
h2.has-flair {
	position: relative;
	text-align: center;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--css-gold) !important;
}
.woocommerce-products-header__title::after {
	content: "✦";
	display: block;
	margin: .35rem auto 0;
	font-size: .7em;
	color: var(--css-rust);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header,
#masthead,
.bgtfw-header {
	background: linear-gradient(180deg, #0a0f24 0%, var(--css-night) 100%) !important;
	border-bottom: 1px solid var(--css-line);
	box-shadow: var(--css-shadow-sm);
}

/* Nav links */
.main-navigation a,
.menu a,
#site-navigation a {
	font-family: var(--css-head) !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 500;
	color: var(--css-cream) !important;
}
.main-navigation a:hover,
.menu a:hover,
.current-menu-item > a {
	color: var(--css-gold) !important;
}

/* Hero / header video overlay tint so text pops */
.has-video-header .custom-header-media::after,
.wp-custom-header::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13,19,48,.35), rgba(13,19,48,.78));
	pointer-events: none;
}

/* ==========================================================================
   BUTTONS  (WooCommerce + Crio)
   ========================================================================== */
.button,
.wp-block-button__link,
a.button, button, input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.added_to_cart {
	font-family: var(--css-head) !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	font-weight: 600 !important;
	color: #1a1206 !important;
	background: linear-gradient(180deg, var(--css-gold) 0%, var(--css-gold-deep) 100%) !important;
	border: none !important;
	border-radius: var(--css-radius) !important;
	padding: .7em 1.5em !important;
	box-shadow: var(--css-shadow-sm), inset 0 1px 0 rgba(255,255,255,.35) !important;
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
input[type="submit"]:hover {
	transform: translateY(-2px) !important;
	filter: brightness(1.05);
	box-shadow: var(--css-shadow), inset 0 1px 0 rgba(255,255,255,.4) !important;
	color: #1a1206 !important;
}

/* Secondary / leather button variant */
.button.secondary,
.woocommerce a.button.wc-backward {
	background: linear-gradient(180deg, var(--css-rust) 0%, var(--css-rust-deep) 100%) !important;
	color: var(--css-star) !important;
}

/* ==========================================================================
   WOOCOMMERCE — SHOP / PRODUCT GRID
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--css-night-2) !important;
	border: 1px solid var(--css-line);
	border-radius: var(--css-radius);
	padding: 14px 14px 22px !important;
	box-shadow: var(--css-shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	overflow: hidden;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	border-color: rgba(230,176,74,.5);
	box-shadow: var(--css-shadow);
}

/* Product image framing */
.woocommerce ul.products li.product a img,
.woocommerce-loop-product__link img {
	border-radius: 8px;
	background: #0a0f24;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	font-family: var(--css-head) !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: var(--css-cream) !important;
	padding-top: .8rem !important;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--css-gold) !important;
	font-family: var(--css-head) !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
}
.woocommerce .price del {
	color: var(--css-cream-dim) !important;
	opacity: .7;
	font-weight: 400;
}
.woocommerce .price ins {
	text-decoration: none;
}

/* "Sale" badge — turn it into a sheriff star ribbon */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--css-rust) !important;
	color: var(--css-star) !important;
	font-family: var(--css-head) !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	border-radius: 999px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1 !important;
	padding: .45em .9em !important;
	box-shadow: var(--css-shadow-sm);
	border: 2px solid var(--css-gold);
}

/* Sorting / result count bar */
.woocommerce .woocommerce-ordering select,
.woocommerce-ordering select {
	background: var(--css-night-2) !important;
	color: var(--css-cream) !important;
	border: 1px solid var(--css-line) !important;
	border-radius: var(--css-radius) !important;
	padding: .5em .8em !important;
	font-family: var(--css-head) !important;
}
.woocommerce-result-count {
	color: var(--css-cream-dim) !important;
}

/* ==========================================================================
   WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */
.woocommerce div.product .product_title {
	color: var(--css-gold) !important;
	font-family: var(--css-head) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--css-night-2) !important;
	border-color: var(--css-line) !important;
	border-radius: var(--css-radius) var(--css-radius) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--css-night-3) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--css-cream) !important;
	font-family: var(--css-head) !important;
	text-transform: uppercase;
}
.woocommerce .quantity input.qty {
	background: var(--css-night-2) !important;
	color: var(--css-cream) !important;
	border: 1px solid var(--css-line) !important;
	border-radius: var(--css-radius) !important;
}

/* Notices / messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--css-night-2) !important;
	color: var(--css-cream) !important;
	border-top: 3px solid var(--css-gold) !important;
	border-radius: var(--css-radius);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--css-gold) !important; }

/* ==========================================================================
   CART / CHECKOUT  (styling only — flow untouched)
   ========================================================================== */
.woocommerce table.shop_table {
	background: var(--css-night-2) !important;
	border: 1px solid var(--css-line) !important;
	border-radius: var(--css-radius) !important;
	color: var(--css-cream) !important;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--css-line) !important;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
	background: var(--css-night-2) !important;
	color: var(--css-cream) !important;
	border: 1px solid var(--css-line) !important;
	border-radius: var(--css-radius) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer,
#colophon,
.bgtfw-footer {
	background: #090d20 !important;
	border-top: 1px solid var(--css-line);
	color: var(--css-cream-dim) !important;
}
.site-footer a { color: var(--css-gold) !important; }
.site-footer .widget-title { color: var(--css-cream) !important; }

/* Social icons (Instagram / YouTube) hover to gold */
.site-footer .menu-item a:hover,
.social-icon a:hover { color: var(--css-gold) !important; }

/* ==========================================================================
   MISC POLISH
   ========================================================================== */
::selection { background: var(--css-gold); color: #1a1206; }

/* Inputs & search */
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="number"], textarea, select {
	background: var(--css-night-2) !important;
	color: var(--css-cream) !important;
	border: 1px solid var(--css-line) !important;
	border-radius: var(--css-radius) !important;
}
input::placeholder, textarea::placeholder { color: var(--css-cream-dim) !important; }

/* Scroll-to-top (Crio "goup") + sticky bits tinted */
#goup-container .goup-text,
.goup-container {
	background: var(--css-gold) !important;
	color: #1a1206 !important;
	border-radius: 50% !important;
}

/* Hairline dividers */
hr { border: 0; border-top: 1px solid var(--css-line); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	body { background-attachment: scroll !important; }
}