/*
Theme Name: TROTIX
Theme URI: https://trotix.shop
Author: TROTIX
Description: Block theme for TROTIX — electric scooter spare parts store (Algeria). Arabic RTL primary, French secondary. Design tokens live in theme.json.
Version: 0.2.2
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: trotix
*/

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
:focus-visible { outline: 3px solid var(--wp--preset--color--black); outline-offset: 2px; box-shadow: 0 0 0 5px var(--wp--preset--color--primary); }

/* Model names, codes, numbers stay LTR inside RTL text */
.ltr-token, code, .trotix-sku { direction: ltr; unicode-bidi: isolate; font-family: var(--wp--preset--font-family--latin); }

/* ---------- Buttons: orange background + BLACK text (contrast ~6.6:1) ---------- */
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--black);
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid var(--wp--preset--color--primary);
  padding: 0.8em 1.4em;
  min-height: 48px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--wp--preset--color--black); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--black); }
.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--black); border-color: var(--wp--preset--color--black); }

/* ---------- Header ---------- */
.trotix-header { border-bottom: 1px solid var(--wp--preset--color--gray-light); background: var(--wp--preset--color--white); position: sticky; top: 0; z-index: 50; }
.trotix-wordmark a { text-decoration: none; color: var(--wp--preset--color--black); font-family: var(--wp--preset--font-family--latin); font-weight: 800; letter-spacing: .02em; }
/* The wordmark colour accent is a PLACEHOLDER until the final logo is approved */
.trotix-wordmark a::first-letter { color: var(--wp--preset--color--primary); }

.trotix-lang a { font-weight: 600; text-decoration: none; padding: .25rem .6rem; border: 1px solid var(--wp--preset--color--gray-light); border-radius: 999px; color: var(--wp--preset--color--black); }
.trotix-lang a:hover { background: var(--wp--preset--color--black); color: var(--wp--preset--color--white); }
.trotix-description { margin-block: var(--wp--preset--spacing--50); }

/* ---------- Dark sections (no dark store mode in v1) ---------- */
.trotix-dark { background: var(--wp--preset--color--black); color: var(--wp--preset--color--white); }
.trotix-dark a:not(.wp-element-button):not(.wp-block-button__link) { color: var(--wp--preset--color--primary); }
.trotix-dark .wp-element-button:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--black); border-color: var(--wp--preset--color--white); }

/* ---------- Cards / product grid ---------- */
.wc-block-grid__product, .products .product { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--gray-light); border-radius: 12px; padding: 12px; }
.wc-block-grid__product-price, .price { font-family: var(--wp--preset--font-family--latin); font-weight: 700; }

/* ---------- Product page ---------- */
.single-product .wp-block-columns { gap: var(--wp--preset--spacing--40); }
.single-product .product_title, .single-product h1.wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); margin-bottom: .25em; }
.single-product .price, .single-product .wc-block-components-product-price { font-size: var(--wp--preset--font-size--large); }
.single-product .variations select { width: 100%; min-height: 48px; border: 1px solid var(--wp--preset--color--gray-steel); border-radius: 8px; padding: 0 12px; }
.single-product table.variations th, .single-product table.variations td { display: block; padding: 0 0 6px; text-align: start; }

/* ---------- Mobile bottom navigation ---------- */
.trotix-bottomnav { display: none; }
@media (max-width: 782px) {
  body { padding-bottom: 72px; }
  .trotix-bottomnav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: var(--wp--preset--color--white); border-top: 1px solid var(--wp--preset--color--gray-light);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .trotix-bottomnav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; font-size: 12px; font-weight: 600; color: var(--wp--preset--color--black); text-decoration: none;
  }
  .trotix-bottomnav a:active, .trotix-bottomnav a[aria-current="page"] { background: var(--wp--preset--color--gray-light); }
  .trotix-bottomnav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }