/*
Theme Name: KTM Colombia
Theme URI: https://www.ktmcolombia.com.co
Author: 150 Por Ciento S.A.S.
Author URI: https://www.150porciento.com
Description: Tema de bloques para KTM Colombia (Autocolombiana / Autogermana). Construido desde el prototipo aprobado y el Dealer Websites Guideline de KTM.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.3
Version: 0.2.0
License: Propietario. Propiedad intelectual de Autogermana.
Text Domain: ktm-colombia
*/

/* Reglas base que theme.json no expresa. Los valores salen de los tokens (var(--wp--...)). */

*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }
button, a, input, select, textarea, label { touch-action: manipulation; }

/* Botones: alto y ancho máximo del guideline */
.wp-element-button, .wp-block-button__link {
  min-height: var(--wp--custom--control--height);
  max-width: var(--wp--custom--control--button-max-width);
  display: inline-flex; align-items: center; justify-content: flex-start; text-align: left;
  transition: filter var(--wp--custom--motion--base) ease, transform 120ms var(--wp--custom--motion--ease-out-quart);
}
.wp-element-button:active, .wp-block-button__link:active { transform: scale(.97); }

/* Campos: 50 px, borde 2 px, 16 px para evitar zoom en iOS */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  min-height: var(--wp--custom--control--height);
  border: var(--wp--custom--control--border-width) solid var(--wp--preset--color--grey-dark);
  border-radius: 0; padding: 0 16px; font: inherit; font-size: 16px;
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white);
}
textarea { padding: 12px 16px; min-height: 120px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 1px; border-color: var(--wp--preset--color--orange); }
input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--wp--preset--color--orange); }

/* Cifras que cambian (precios, métricas) sin saltos */
.ktm-price, .ktm-num { font-variant-numeric: tabular-nums; }

/* Botones según CD Manual 2023 (Primary A/B/C, secundario). El hover cambia relleno por contorno o viceversa. */
.is-style-secondary .wp-block-button__link, .ktm-btn-secondary {
  background: transparent; border: 0; padding-left: 0; color: inherit; gap: 10px; max-width: none;
}
.is-style-secondary .wp-block-button__link::before, .ktm-btn-secondary::before {
  content: '\2193'; color: var(--wp--preset--color--orange); border-bottom: 2px solid var(--wp--preset--color--orange); line-height: 1; padding: 0 2px 1px;
}

/* Animación de CTA (CD Manual, página 27): barrido naranja de izquierda a derecha, en bucle */
.ktm-cta-swipe { position: relative; overflow: hidden; }
.ktm-cta-swipe::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 35%;
  background: var(--wp--preset--color--orange); transform: translateX(-110%);
  animation: ktm-swipe 2.8s cubic-bezier(.65,0,.35,1) 1.2s infinite;
}
@keyframes ktm-swipe { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(300%); } }

/* Viñeta KTM basada en la K del logo (usar con moderación). El SVG oficial lo entrega KTM; esto es un marcador. */
.ktm-list { list-style: none; padding-left: 0; }
.ktm-list li { position: relative; padding-left: 22px; }
.ktm-list li::before { content: ''; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: currentColor; clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%); }

/* Íconos: sistema KTM, grilla de 24 px, trazo de 3 px, formas rectas */
.ktm-icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; fill: none; }
.ktm-icon--tech { color: var(--wp--preset--color--orange); }

/* Hover solo con puntero fino */
@media (hover: hover) and (pointer: fine) {
  .is-style-secondary .wp-block-button__link:hover, .ktm-btn-secondary:hover { color: var(--wp--preset--color--orange); }
}

@media (prefers-reduced-motion: reduce) {
  .ktm-cta-swipe::after { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}