/*
Theme Name:   DigiTune GTS
Theme URI:    https://gts.digitune.co.uk
Description:  Storefront child theme for the DigiTune GTS subdomain (gts.digitune.co.uk). Distinct branding for the GTS (Graphical Tuning Suite) tuning analysis product, sharing WooCommerce, billing and the Digital License Manager with the main DigiTune site.
Author:       DigiTune
Author URI:   https://digitune.co.uk
Template:     storefront
Version:      0.1.6
Text Domain:  digitune-gts
*/

/* ------------------------------------------------------------------
   Brand palette — placeholders, adjust to your GTS visual identity.
   ------------------------------------------------------------------ */
:root {
	--gts-bg:        #0e1116;
	--gts-surface:   #161b22;
	--gts-text:      #e6edf3;
	--gts-muted:     #8b949e;
	--gts-accent:    #1f9cf0;
	--gts-accent-2:  #ff8800;
	--gts-border:    #30363d;
}

/* Sitewide — high specificity to win over Storefront's typography rules. */
body.gts-site,
body.gts-site button,
body.gts-site input,
body.gts-site select,
body.gts-site optgroup,
body.gts-site textarea,
body.gts-site .site-content,
body.gts-site .entry-content,
body.gts-site p,
body.gts-site li,
body.gts-site dt,
body.gts-site dd,
body.gts-site blockquote {
	background-color: transparent;
	color: var(--gts-text);
}

body.gts-site {
	background: var(--gts-bg);
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Headings — Storefront sets these to #404040, override to bright text. */
body.gts-site h1,
body.gts-site h2,
body.gts-site h3,
body.gts-site h4,
body.gts-site h5,
body.gts-site h6,
body.gts-site .entry-title,
body.gts-site .entry-title a,
body.gts-site .page-title,
body.gts-site .widget-title {
	color: var(--gts-text);
}

/* Links — accent colour, hover to secondary accent. */
body.gts-site a,
body.gts-site .entry-content a {
	color: var(--gts-accent);
}
body.gts-site a:hover,
body.gts-site .entry-content a:hover {
	color: var(--gts-accent-2);
}

/* Header */
body.gts-site .site-header,
body.gts-site .site-header-container {
	background-color: var(--gts-surface);
	border-bottom: 1px solid var(--gts-border);
	color: var(--gts-text);
}

/* Custom-logo on gts host — the mu-plugin substitutes the <img> src to point
   at the dark-mode SVG. The SVG has no intrinsic width/height (only viewBox),
   so we MUST set explicit height in CSS or some browsers render it 0×0.
   Width follows aspect ratio automatically. */
body.gts-site .site-branding .custom-logo-link {
	background: transparent;
	display: inline-block;
	padding: 0;
	box-shadow: none;
}

body.gts-site .site-branding .custom-logo {
	background: transparent;
	box-shadow: none;
	display: block;
	height: 60px;
	width: auto;
	max-width: 100%;
}

/* Fallback for when no custom logo is set: render the site-title text as a
   background-image of the dark logo. Rarely triggered (custom logo is set in
   Customizer) but keeps the gts host branded even if Customizer changes. */
body.gts-site .site-branding .site-title a,
body.gts-site .site-branding h1.beta a,
body.gts-site .site-branding h1 a {
	display: inline-block;
	width: 260px;
	height: 56px;
	max-width: 100%;
	background-image: url(assets/logos/DigiTune_dark.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	text-indent: -9999em;
	overflow: hidden;
	color: transparent;
}

body.gts-site .site-branding .site-description {
	display: none;
}

@media (max-width: 600px) {
	body.gts-site .site-branding .custom-logo {
		height: 44px;
	}
	body.gts-site .site-branding .site-title a,
	body.gts-site .site-branding h1.beta a,
	body.gts-site .site-branding h1 a {
		width: 200px;
		height: 42px;
	}
}

/* Main nav — Storefront uses .main-navigation ul li a in the header. */
body.gts-site .main-navigation ul li a,
body.gts-site .secondary-navigation ul.menu a,
body.gts-site .site-header-cart .cart-contents,
body.gts-site .site-search,
body.gts-site .site-header .widget a {
	color: var(--gts-text);
}

body.gts-site .main-navigation ul li a:hover,
body.gts-site .main-navigation ul li:hover > a,
body.gts-site .secondary-navigation ul.menu a:hover {
	color: var(--gts-accent);
}

/* Dropdown menus */
body.gts-site .main-navigation ul.menu ul,
body.gts-site .main-navigation ul.nav-menu ul {
	background-color: var(--gts-surface);
	border: 1px solid var(--gts-border);
}

/* Search box in header */
body.gts-site .site-search .widget_product_search input[type="search"],
body.gts-site input[type="text"],
body.gts-site input[type="email"],
body.gts-site input[type="password"],
body.gts-site input[type="search"],
body.gts-site input[type="tel"],
body.gts-site input[type="number"],
body.gts-site input[type="url"],
body.gts-site textarea {
	background-color: #fff;
	color: #111;
	border: 1px solid var(--gts-border);
}

/* Selects (incl. WooCommerce variation dropdowns) — the body.gts-site rule
   gives selects light text on a transparent bg, which renders as light-on-white
   in browsers. Force a dark surface so text stays readable. */
body.gts-site select {
	background-color: var(--gts-surface);
	color: var(--gts-text);
	border: 1px solid var(--gts-border);
	border-radius: 4px;
	padding: 0.4em 0.6em;
}
body.gts-site select option,
body.gts-site select optgroup {
	background-color: var(--gts-surface);
	color: var(--gts-text);
}

/* WooCommerce cart, checkout, account tables — Storefront defaults assume a
   light page background. Re-skin for the dark theme. */
body.gts-site .woocommerce table.shop_table,
body.gts-site .woocommerce-page table.shop_table,
body.gts-site .woocommerce table.cart,
body.gts-site .woocommerce-cart table.cart {
	background-color: var(--gts-surface);
	color: var(--gts-text);
	border: 1px solid var(--gts-border);
	border-radius: 6px;
	border-collapse: separate;
	border-spacing: 0;
}
body.gts-site .woocommerce table.shop_table th,
body.gts-site .woocommerce table.shop_table td,
body.gts-site .woocommerce-page table.shop_table th,
body.gts-site .woocommerce-page table.shop_table td {
	background-color: transparent;
	color: var(--gts-text);
	border-top: 1px solid var(--gts-border);
}
body.gts-site .woocommerce table.shop_table thead th {
	background-color: rgba(255,255,255,0.03);
	color: var(--gts-text);
	border-bottom: 1px solid var(--gts-border);
}
body.gts-site .woocommerce table.shop_table tbody tr:first-child td {
	border-top: none;
}
body.gts-site .woocommerce table.shop_table td.product-name a {
	color: var(--gts-accent);
}
body.gts-site .woocommerce table.shop_table td.product-name a:hover {
	color: var(--gts-accent-2);
}
body.gts-site .woocommerce table.shop_table .product-remove a.remove {
	color: var(--gts-muted) !important;
	background: transparent !important;
}
body.gts-site .woocommerce table.shop_table .product-remove a.remove:hover {
	color: var(--gts-accent-2) !important;
	background: transparent !important;
}

/* Cart totals box */
body.gts-site .cart_totals,
body.gts-site .cart-collaterals .cart_totals {
	color: var(--gts-text);
}
body.gts-site .cart_totals h2,
body.gts-site .cart-collaterals h2 {
	color: var(--gts-text);
}

/* Coupon / update cart row */
body.gts-site .woocommerce .cart .actions .coupon label {
	color: var(--gts-text);
}

/* Quantity input inside the cart */
body.gts-site .woocommerce .quantity input.qty {
	background-color: #fff;
	color: #111;
	border: 1px solid var(--gts-border);
}

/* Empty-cart notice */
body.gts-site .woocommerce .cart-empty,
body.gts-site .woocommerce .return-to-shop {
	color: var(--gts-text);
}

/* Generic WooCommerce notices (added-to-cart, errors, info) */
body.gts-site .woocommerce-message,
body.gts-site .woocommerce-info,
body.gts-site .woocommerce-error,
body.gts-site .woocommerce-notice {
	background-color: var(--gts-surface);
	color: var(--gts-text);
	border-top-color: var(--gts-accent);
}
body.gts-site .woocommerce-message a,
body.gts-site .woocommerce-info a,
body.gts-site .woocommerce-error a {
	color: var(--gts-accent);
}

/* Single product — variations table (where the dropdowns live) */
body.gts-site .woocommerce div.product table.variations,
body.gts-site .woocommerce div.product table.variations td,
body.gts-site .woocommerce div.product table.variations th {
	background-color: transparent;
	color: var(--gts-text);
	border: none;
}
body.gts-site .woocommerce div.product table.variations label {
	color: var(--gts-text);
}
body.gts-site .woocommerce div.product .reset_variations {
	color: var(--gts-muted);
}
body.gts-site .woocommerce div.product .reset_variations:hover {
	color: var(--gts-accent-2);
}
body.gts-site .woocommerce div.product .single_variation_wrap .woocommerce-variation-price,
body.gts-site .woocommerce div.product .single_variation_wrap .woocommerce-variation-availability,
body.gts-site .woocommerce div.product .single_variation_wrap .woocommerce-variation-description {
	color: var(--gts-text);
}

/* Footer */
body.gts-site .site-footer,
body.gts-site .site-footer .widget-area,
body.gts-site .site-info {
	background-color: var(--gts-surface);
	color: var(--gts-muted);
	border-top: 1px solid var(--gts-border);
}

body.gts-site .site-footer h1,
body.gts-site .site-footer h2,
body.gts-site .site-footer h3,
body.gts-site .site-footer h4,
body.gts-site .site-footer .widget-title {
	color: var(--gts-text);
}

body.gts-site .site-footer a {
	color: var(--gts-accent);
}

/* Buttons — including WooCommerce buy buttons */
body.gts-site .button,
body.gts-site button.button,
body.gts-site .woocommerce a.button,
body.gts-site .woocommerce button.button,
body.gts-site .woocommerce input.button,
body.gts-site .woocommerce #respond input#submit {
	background: var(--gts-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 0.7em 1.4em;
	font-weight: 600;
}

body.gts-site .button:hover,
body.gts-site .woocommerce a.button:hover,
body.gts-site .woocommerce button.button:hover {
	background: var(--gts-accent-2);
	color: #fff;
}

/* Hero (used on the GTS homepage template) */
.gts-hero {
	padding: 6rem 1.5rem;
	text-align: center;
	background:
		radial-gradient( ellipse at top, rgba(31,156,240,0.18), transparent 70% ),
		var(--gts-bg);
}

.gts-hero h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin: 0 0 0.5rem;
	color: var(--gts-text);
}

.gts-hero p.tagline {
	font-size: 1.15rem;
	color: var(--gts-muted);
	max-width: 42rem;
	margin: 0 auto 2rem;
}

.gts-hero .cta {
	display: inline-block;
	padding: 0.9em 1.8em;
	background: var(--gts-accent);
	color: #fff;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
}

.gts-hero .cta:hover { background: var(--gts-accent-2); color: #fff; }

/* Feature grid */
.gts-features {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(16rem, 1fr) );
	gap: 1.25rem;
	padding: 3rem 1.5rem;
	max-width: 72rem;
	margin: 0 auto;
}

.gts-feature {
	background: var(--gts-surface);
	border: 1px solid var(--gts-border);
	border-radius: 8px;
	padding: 1.5rem;
}

.gts-feature h3 {
	margin-top: 0;
	color: var(--gts-text);
}