/*
 * Tutkahuolto theme custom CSS.
 * Loaded after tailwind-built.css, and forced to print LAST among all
 * enqueued stylesheets (see functions.php tutka_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) Fixes for WooCommerce's own default stylesheet, which is intentionally
 *     kept active (cart/checkout/account use it) but adds body classes
 *     ("woocommerce-page") with global rules like "img { height:auto }" that
 *     would otherwise override fixed-size images elsewhere in the theme.
 *  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 woocommerce-layout.css sets a blanket              */
/* ".woocommerce img, .woocommerce-page img { height:auto; max-width:100% }" */
/* rule. Because "body.woocommerce-page" wraps EVERY page WooCommerce     */
/* considers shop-related (shop, product, cart, checkout, my account),    */
/* this silently overrides any fixed-height image elsewhere on those      */
/* pages - most noticeably the header logo, which would otherwise render  */
/* correctly on the front page / service page but balloon to its full     */
/* native size on the shop/product pages. !important is required because  */
/* WooCommerce's rule includes an element selector (".x img") which is    */
/* MORE specific than a bare Tailwind utility class like ".h-14" alone.   */
/* -------------------------------------------------------------------- */
.tutka-logo {
	height: 56px !important;
	width: auto !important;
	max-width: 220px;
	object-fit: contain;
	display: inline-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 formatting used both by get_price_html() output and WC defaults */
.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;
}

/* -------------------------------------------------------------------- */
/* WooCommerce: related products grid reuses .tutka look via utilities, */
/* but the outer <ul class="products"> wrapper needs a grid reset, and  */
/* the ".woocommerce-page a img{height:auto}" rule must not affect      */
/* product thumbnails (they should already be square via aspect-square, */
/* height:auto is actually fine there since width is 100% of a square   */
/* container - only the FIXED-size logo needs the !important override  */
/* above).                                                              */
/* -------------------------------------------------------------------- */
ul.products {
	display: contents;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.products li.product {
	list-style: none;
}

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

/* Notices (cart/checkout messages left on default WC styling elsewhere,
   but keep our own inline notices on the front page / service page tidy) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	font-family: 'Inter', sans-serif;
	border-radius: 0.375rem;
}