/*
 * Tutkahuolto child theme custom CSS.
 * Loaded after tailwind-built.css, and forced to print LAST among all
 * enqueued stylesheets (see functions.php tutka_child_style_last()). Contains:
 *  1) "Rugged Precision" design-token variables (for reference / non-Tailwind rules)
 *  2) Small decorative classes lifted from the original Stitch mockups
 *  3) A fix for WooCommerce's own default stylesheet, which Blocksy leaves
 *     active for cart/checkout/account. WooCommerce adds a body class
 *     ("woocommerce-page") on shop/product/cart pages with a rule like
 *     "img { height:auto; max-width:100% }" that can override fixed-size
 *     images in our own product cards.
 *  4) Plain-CSS restyling of WooCommerce-generated markup (add-to-cart button,
 *     quantity input, variation selects, product attributes table) that we
 *     don't fully control the class names of.
 */

:root {
	--tutka-primary: #004276;
	--tutka-primary-container: #1b5a96;
	--tutka-secondary: #8b5000;
	--tutka-secondary-container: #fd9d29;
	--tutka-orange-deep: #D97C0E;
	--tutka-tertiary: #064275;
	--tutka-dark-deep: #121417;
	--tutka-line: #E4E6E9;
	--tutka-ink-soft: #5B5F63;
	--tutka-surface: #fcf9f8;
	--tutka-surface-container-low: #f6f3f2;
	--tutka-error: #ba1a1a;
}

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

.technical-grid {
	background-image: radial-gradient(circle, var(--tutka-line) 1px, transparent 1px);
	background-size: 24px 24px;
}

.technical-grid-bg {
	background-image:
		linear-gradient(var(--tutka-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--tutka-line) 1px, transparent 1px);
	background-size: 40px 40px;
}

.hero-clip {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.technical-border {
	position: relative;
}
.technical-border::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--tutka-orange-deep);
	border-left: 2px solid var(--tutka-orange-deep);
}
.technical-border::after {
	content: '';
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid var(--tutka-orange-deep);
	border-right: 2px solid var(--tutka-orange-deep);
}

.step-number {
	font-family: 'Barlow Condensed', sans-serif;
	color: var(--tutka-orange-deep);
}

/* -------------------------------------------------------------------- */
/* Fix: WooCommerce's own stylesheet sets a blanket                     */
/* ".woocommerce img, .woocommerce-page img { height:auto; max-width:100% }" */
/* rule wherever body has class "woocommerce-page" (shop, product, cart,  */
/* checkout, my account). This is more specific than a bare Tailwind      */
/* utility class (class+element beats a lone class), so any place we      */
/* intentionally size a product image to fill its container needs this    */
/* guarded class instead of relying on w-full/h-full alone.               */
/* -------------------------------------------------------------------- */
.tutka-contain-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	display: block;
}

/* -------------------------------------------------------------------- */
/* WooCommerce: single product add-to-cart (simple / variable / grouped) */
/* -------------------------------------------------------------------- */
.tutka-add-to-cart form.cart {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

.tutka-add-to-cart .single_add_to_cart_button,
.tutka-add-to-cart button[type="submit"] {
	flex: 1 1 auto;
	background-color: var(--tutka-orange-deep);
	color: #fff;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: 0.05em;
	font-size: 18px;
	text-transform: uppercase;
	padding: 1.25rem 2rem;
	border: 0;
	border-radius: 0.125rem;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}
.tutka-add-to-cart .single_add_to_cart_button:hover,
.tutka-add-to-cart button[type="submit"]:hover {
	background-color: var(--tutka-secondary);
}
.tutka-add-to-cart .single_add_to_cart_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.tutka-add-to-cart .quantity {
	display: flex;
}
.tutka-add-to-cart .quantity .qty {
	width: 4.5rem;
	height: auto;
	border: 1px solid var(--tutka-line);
	border-radius: 0.125rem;
	padding: 0.9rem 0.75rem;
	font-family: 'JetBrains Mono', monospace;
	text-align: center;
}
.tutka-add-to-cart .quantity .qty:focus {
	outline: none;
	border-color: var(--tutka-primary);
	box-shadow: 0 0 0 2px rgba(0,66,118,0.15);
}

.tutka-add-to-cart table.variations {
	width: 100%;
	margin-bottom: 1rem;
}
.tutka-add-to-cart table.variations td {
	padding: 0.4rem 0;
}
.tutka-add-to-cart table.variations label {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	color: var(--tutka-primary);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}
.tutka-add-to-cart table.variations select {
	width: 100%;
	border: 1px solid var(--tutka-line);
	border-radius: 0.125rem;
	padding: 0.65rem 0.75rem;
	background: #fff;
}
.tutka-add-to-cart .woocommerce-variation-price .price {
	color: var(--tutka-primary);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
}
.tutka-add-to-cart a.reset_variations {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var(--tutka-ink-soft);
	text-decoration: underline;
}

.price ins {
	color: var(--tutka-orange-deep);
	text-decoration: none;
}
.price del {
	color: var(--tutka-ink-soft);
	opacity: 0.7;
	font-size: 0.75em;
}

/* -------------------------------------------------------------------- */
/* WooCommerce: product attributes ("Tekniset tiedot") table            */
/* -------------------------------------------------------------------- */
.tutka-specs table.woocommerce-product-attributes,
.tutka-specs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
}
.tutka-specs table.woocommerce-product-attributes th,
.tutka-specs table.woocommerce-product-attributes td,
.tutka-specs table.shop_attributes th,
.tutka-specs table.shop_attributes td {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--tutka-line);
	text-align: left;
	vertical-align: top;
}
.tutka-specs table.woocommerce-product-attributes th,
.tutka-specs table.shop_attributes th {
	width: 33%;
	font-weight: 700;
	color: var(--tutka-primary);
	background: rgba(246,243,242,0.6);
	text-transform: uppercase;
}
.tutka-specs table.woocommerce-product-attributes tr:last-child th,
.tutka-specs table.woocommerce-product-attributes tr:last-child td,
.tutka-specs table.shop_attributes tr:last-child th,
.tutka-specs table.shop_attributes tr:last-child td {
	border-bottom: 0;
}

/* Related products grid reuses our content-product.php card automatically;
   the outer <ul class="products"> wrapper just needs a grid reset. */
ul.products {
	display: contents;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.products li.product {
	list-style: none;
}

.star-rating {
	color: var(--tutka-orange-deep);
	font-family: 'Material Symbols Outlined';
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	font-family: 'Inter', sans-serif;
	border-radius: 0.375rem;
}