/*
Theme Name:   The IT Shed
Theme URI:    https://theitshed.co.uk
Description:  A WooCommerce-ready child theme of Storefront for The IT Shed. Clean, light branding built around the shed logo — cobalt blue and navy on near-white. Sells refurbished and used IT kit now, and grows into a full store once Linnworks is wired up.
Author:       The IT Shed
Author URI:   https://theitshed.co.uk
Template:     storefront
Version:      1.1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  the-it-shed
Tags:         e-commerce, two-columns, custom-colors, custom-menu, featured-images, threaded-comments
*/

/* =============================================================
   The IT Shed — brand tokens (from the logo)
   Cobalt blue + navy on near-white.
   ============================================================= */
:root {
	--its-blue:       #064fac; /* the "IT" cobalt   */
	--its-blue-dk:    #053f8a; /* hover / pressed    */
	--its-blue-lt:    #2f74d0; /* light accents      */
	--its-navy:       #1c242c; /* ink / shed         */
	--its-navy-soft:  #4a5560; /* muted text         */
	--its-header-bg:  #fcfcfc; /* light header       */
	--its-ground:     #f4f6f9; /* page background    */
	--its-surface:    #ffffff; /* cards              */
	--its-moss:       #4c7a52; /* price / in-stock   */
	--its-moss-dk:    #3c6342;
	--its-ink-soft:   #6a7480;
	--its-line:       rgba(28, 36, 44, 0.10);

	--its-radius:     8px;
	--its-radius-lg:  12px;
	--its-shadow:     0 6px 20px rgba(28, 36, 44, 0.08);
	--its-shadow-lg:  0 14px 40px rgba(28, 36, 44, 0.14);
}

/* -------------------------------------------------------------
   Global ground
   ------------------------------------------------------------- */
body {
	background-color: var(--its-ground);
	color: var(--its-navy);
}

body, button, input, select, textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.storefront-product-section .section-title {
	font-family: "Century Gothic", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
	letter-spacing: -0.01em;
	color: var(--its-navy);
}

a { color: var(--its-blue); }
a:hover { color: var(--its-blue-dk); }

/* -------------------------------------------------------------
   Header — light, so the logo reads clearly
   ------------------------------------------------------------- */
.site-header {
	background-color: var(--its-header-bg);
	border-bottom: 3px solid var(--its-blue);
	box-shadow: 0 1px 0 var(--its-line);
	padding-top: 1.2em;
	padding-bottom: 1.2em;
}

.site-header .site-branding,
.site-header .site-title a,
.site-header .site-title a:hover { color: var(--its-navy); }
.site-title a { color: var(--its-navy) !important; }
.site-header .custom-logo-link img { max-height: 84px; width: auto; }
.site-header .site-description { color: var(--its-ink-soft); }

.main-navigation ul li a,
.site-header .main-navigation ul li a {
	color: var(--its-navy);
	font-weight: 600;
}
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul li.current-menu-item > a { color: var(--its-blue); }

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
	background-color: var(--its-surface);
	border-top: 2px solid var(--its-blue);
	box-shadow: var(--its-shadow);
}
.main-navigation ul.menu ul.sub-menu a,
.main-navigation ul.nav-menu ul.children a { color: var(--its-navy); }

.site-header-cart .cart-contents,
.site-header ul.menu li.cart-contents a { color: var(--its-navy); }
.site-header-cart .cart-contents:hover { color: var(--its-blue); }
.site-header-cart .widget_shopping_cart { background-color: var(--its-surface); }

/* Handheld / mobile nav toggle */
button.menu-toggle,
button.menu-toggle:hover {
	background-color: var(--its-navy);
	color: #fff;
}

/* -------------------------------------------------------------
   Buttons
   ------------------------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--its-navy);
	color: #fff;
	border-radius: var(--its-radius);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-shadow: none;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: #29343e;
	color: #fff;
}

button:active,
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(1px); }

/* Primary CTA buttons — cobalt blue */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button {
	background-color: var(--its-blue);
	color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
	background-color: var(--its-blue-dk);
	color: #fff;
}

/* -------------------------------------------------------------
   Products
   ------------------------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--its-surface);
	border: 1px solid var(--its-line);
	border-radius: var(--its-radius-lg);
	padding: 1em 1em 1.4em;
	box-shadow: var(--its-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--its-shadow-lg);
}
.woocommerce ul.products li.product a img { border-radius: var(--its-radius); margin-bottom: 0.8em; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-weight: 700; padding-top: 0; color: var(--its-navy); }

/* Prices */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.price ins {
	color: var(--its-moss-dk);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .price del { color: var(--its-ink-soft); }

/* Sale flash — cobalt tag */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background-color: var(--its-blue);
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 4px;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: 0.5em 0.7em;
}

.woocommerce div.product .stock,
.woocommerce .in-stock { color: var(--its-moss-dk); font-weight: 700; }
.woocommerce div.product p.stock.out-of-stock,
.woocommerce .out-of-stock { color: #b03a2e; }

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.star-rating::before { color: var(--its-blue); }

/* -------------------------------------------------------------
   Homepage hero — light, to suit the logo
   ------------------------------------------------------------- */
.its-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #e9f0f8 0%, #ffffff 62%);
	border: 1px solid var(--its-line);
	color: var(--its-navy);
	border-radius: var(--its-radius-lg);
	padding: clamp(2.2rem, 5vw, 4rem);
	margin-bottom: 2.5em;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 2rem;
	align-items: center;
}
.its-hero__eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--its-blue);
	background: rgba(6, 79, 172, 0.07);
	border: 1px solid rgba(6, 79, 172, 0.30);
	padding: 0.45em 0.9em;
	border-radius: 4px;
	margin-bottom: 1.2rem;
}
.its-hero__title {
	font-family: "Century Gothic", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.05;
	font-weight: 800;
	margin: 0 0 0.6rem;
	color: var(--its-navy);
	text-wrap: balance;
}
.its-hero__title em { font-style: normal; color: var(--its-blue); }
.its-hero__text {
	max-width: 48ch;
	color: var(--its-navy-soft);
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
}
.its-hero__cta.button {
	background-color: var(--its-blue);
	color: #fff;
	font-size: 1rem;
	padding: 0.85em 1.6em;
}
.its-hero__cta.button:hover { background-color: var(--its-blue-dk); color: #fff; }
.its-hero__art { justify-self: center; width: 100%; max-width: 300px; }
.its-hero__art img,
.its-hero__art svg { width: 100%; height: auto; }

@media (max-width: 768px) {
	.its-hero { grid-template-columns: 1fr; text-align: center; }
	.its-hero__art { max-width: 200px; }
	.its-hero__text { margin-left: auto; margin-right: auto; }
}

/* Trust strip */
.its-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	margin-bottom: 3em;
	padding: 1.2em;
	background: var(--its-surface);
	border: 1px solid var(--its-line);
	border-radius: var(--its-radius-lg);
}
.its-trust__item {
	display: flex;
	align-items: center;
	gap: 0.55em;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--its-navy);
}
.its-trust__item svg { width: 22px; height: 22px; flex: none; color: var(--its-blue); }

/* -------------------------------------------------------------
   Footer — navy, as a contrast bookend to the light header
   ------------------------------------------------------------- */
.site-footer {
	background-color: var(--its-navy);
	color: rgba(255, 255, 255, 0.72);
	border-top: 3px solid var(--its-blue);
}
.site-footer a { color: #cfe0f5; }
.site-footer a:hover { color: #fff; }
.site-footer .widget-title { color: #fff; }

/* -------------------------------------------------------------
   Odds & ends
   ------------------------------------------------------------- */
.woocommerce-info,
.woocommerce-message { border-top-color: var(--its-blue); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--its-blue); }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current { color: var(--its-navy); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--its-blue); color: #fff; }
.woocommerce .woocommerce-breadcrumb { color: var(--its-ink-soft); }