/*
Theme Name: Turn One
Theme URI: https://tone.ormsy.co.za
Description: Premium motorsport theme for TURN ONE — dark paddock palette, large photography, technical typography. Child of Twenty Twenty-Five.
Author: Ormsy
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Template: twentytwentyfive
Text Domain: turn-one
*/

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */
:root {
	--t1-black: #111111;
	--t1-dark: #222222;
	--t1-orange: #f47c20;
	--t1-light: #f5f5f5;
	--t1-white: #ffffff;
	--t1-ease: cubic-bezier(.22, .61, .36, 1);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Technical, wide-tracked headings — the "engineered" feel */
h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-heading {
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.1;
}

h1, .wp-block-post-title { letter-spacing: .05em; }

/* ---------------------------------------------------------------
   Buttons — square, hard-edged, motorsport
   --------------------------------------------------------------- */
.wp-block-button__link,
.wc-block-components-button,
button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button {
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	padding: .9rem 2.2rem;
	transition: background-color .25s var(--t1-ease), color .25s var(--t1-ease), transform .25s var(--t1-ease);
}

.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	transform: translateY(-2px);
}

/* Secondary / outline button */
.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
}
.is-style-outline > .wp-block-button__link:hover {
	background: var(--t1-orange);
	border-color: var(--t1-orange);
	color: var(--t1-white);
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.t1-hero {
	min-height: clamp(30rem, 88vh, 60rem);
	position: relative;
}

/* keeps headline legible over any photograph */
.t1-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,17,17,.35) 0%, rgba(17,17,17,.72) 100%);
	pointer-events: none;
	z-index: 0;
}
.t1-hero > .wp-block-cover__inner-container { position: relative; z-index: 1; }

.t1-hero h1 {
	font-size: clamp(2.5rem, 7vw, 5.5rem);
	font-weight: 700;
}

.t1-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: .35em;
	font-size: .8rem;
	color: var(--t1-orange);
	font-weight: 600;
}

/* ---------------------------------------------------------------
   Category tiles — subtle zoom + orange rule on hover
   --------------------------------------------------------------- */
.t1-tile {
	position: relative;
	overflow: hidden;
	min-height: 22rem;
	transition: transform .4s var(--t1-ease);
}
.t1-tile .wp-block-cover__image-background {
	transition: transform .6s var(--t1-ease);
}
.t1-tile:hover .wp-block-cover__image-background,
.t1-tile:focus-within .wp-block-cover__image-background {
	transform: scale(1.06);
}
.t1-tile::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 4px; width: 0;
	background: var(--t1-orange);
	transition: width .4s var(--t1-ease);
	z-index: 2;
}
.t1-tile:hover::after,
.t1-tile:focus-within::after { width: 100%; }

.t1-tile a { text-decoration: none; }

/* ---------------------------------------------------------------
   Feature blocks (Why TURN ONE)
   --------------------------------------------------------------- */
.t1-feature {
	border-top: 3px solid var(--t1-orange);
	padding-top: 1.5rem;
}
.t1-feature h3 { font-size: 1.15rem; margin-bottom: .5rem; }

/* ---------------------------------------------------------------
   Product grid / cards
   --------------------------------------------------------------- */
.wc-block-product-template .wc-block-product,
.woocommerce ul.products li.product {
	transition: transform .3s var(--t1-ease);
}
.wc-block-product-template .wc-block-product:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
}

.wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product img {
	background: var(--t1-light);
}

/* Product titles stay technical but readable at small sizes */
.wc-block-product-template .wp-block-post-title {
	font-size: .95rem;
	letter-spacing: .03em;
}

/* ---------------------------------------------------------------
   Shop filters sidebar
   --------------------------------------------------------------- */
.wp-block-woocommerce-product-filters h3 {
	font-size: .85rem;
	letter-spacing: .18em;
	padding-bottom: .5rem;
	border-bottom: 1px solid rgba(17,17,17,.15);
	margin-bottom: .9rem;
}

/* ---------------------------------------------------------------
   Single product
   --------------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--t1-black);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.9rem;
}

/* Spec / features tables read like a datasheet */
.woocommerce table.shop_attributes,
.t1-specs table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}
.woocommerce table.shop_attributes th,
.t1-specs th {
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	font-family: var(--wp--preset--font-family--heading);
	color: #666;
	width: 38%;
	padding: .8rem 1rem .8rem 0;
	border-bottom: 1px solid rgba(17,17,17,.1);
}
.woocommerce table.shop_attributes td,
.t1-specs td {
	padding: .8rem 0;
	border-bottom: 1px solid rgba(17,17,17,.1);
}

/* ---------------------------------------------------------------
   Sticky add-to-cart (mobile + scroll)
   --------------------------------------------------------------- */
.t1-sticky-atc {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 999;
	background: var(--t1-black);
	color: var(--t1-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem 1.25rem;
	transform: translateY(110%);
	transition: transform .3s var(--t1-ease);
	box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}
.t1-sticky-atc.is-visible { transform: translateY(0); }
.t1-sticky-atc__name {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.t1-sticky-atc__price { color: var(--t1-orange); font-weight: 700; white-space: nowrap; }
.t1-sticky-atc__btn {
	background: var(--t1-orange);
	color: var(--t1-white);
	border: 0;
	padding: .8rem 1.8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	white-space: nowrap;
}
.t1-sticky-atc__btn:hover { background: #ff8c2f; }
@media (max-width: 600px) {
	.t1-sticky-atc__name { display: none; }
}

/* ---------------------------------------------------------------
   Header / navigation
   --------------------------------------------------------------- */
.wp-block-navigation a {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .82rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}
.wp-block-navigation a:hover { color: var(--t1-orange); }

/* White header: the TURN ONE wordmark is black-on-transparent with orange
   marks, so a dark bar would hide it and a CSS invert would kill the orange. */
.t1-header {
	position: sticky;
	top: 0;
	z-index: 500;
	backdrop-filter: saturate(140%) blur(10px);
	background: rgba(255,255,255,.94);
	border-bottom: 1px solid rgba(17,17,17,.08);
}
.t1-header .wp-block-site-logo img {
	display: block;
	height: auto;
	max-width: 210px;
}
@media (max-width: 782px) {
	.t1-header .wp-block-site-logo img { max-width: 150px; }
}
/* orange underline on the current/hovered nav item */
.t1-header .wp-block-navigation a {
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: border-color .25s var(--t1-ease), color .25s var(--t1-ease);
}
.t1-header .wp-block-navigation a:hover,
.t1-header .wp-block-navigation .current-menu-item a {
	border-bottom-color: var(--t1-orange);
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.t1-footer h3 {
	font-size: .8rem;
	letter-spacing: .2em;
	color: var(--t1-orange);
	margin-bottom: 1rem;
}
.t1-footer a,
.t1-footer li a,
.t1-footer p a {
	color: var(--t1-white);       /* theme.json sets links black — invisible here */
	text-decoration: none;
	opacity: .82;
	transition: opacity .2s var(--t1-ease), color .2s var(--t1-ease);
}
.t1-footer a:hover,
.t1-footer a:focus { opacity: 1; color: var(--t1-orange); }

/* link lists in the footer shouldn't carry markers */
.t1-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.t1-footer ul li { margin: 0 0 .5rem; }

/* dark sections generally: keep links legible */
.has-black-background-color a,
.wp-block-cover a { color: var(--t1-white); }
.has-black-background-color a:hover,
.wp-block-cover a:hover { color: var(--t1-orange); }

/* ---------------------------------------------------------------
   Motion — respect the user's preference
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.t1-tile:hover .wp-block-cover__image-background { transform: none; }
}