/**
 * Tetra Bikes — Landing page styles.
 *
 * Extraído del <style> inline que vivía en header-landing.php.
 * Las rutas de assets (fuentes / hero) son relativas a este archivo
 * (assets/css/), por eso usan ../fonts y ../img.
 */

/* Smooth in-page anchor scrolling + offset para el navbar sticky.
   Respeta prefers-reduced-motion para no marear a quien lo desactiva. */
html { scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Molot — display font for headlines (drop Molot.otf en assets/fonts/) */
@font-face {
	font-family: 'Molot';
	src: url('../fonts/Molot.woff2') format('woff2'),
	     url('../fonts/Molot.woff') format('woff'),
	     url('../fonts/Molot.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* shadcn/ui-style semantic tokens (dark mode) + Tetra Bikes brand */
:root {
	--background: 0 0% 4%;
	--foreground: 0 0% 98%;
	--card: 240 6% 7%;
	--card-foreground: 0 0% 98%;
	--muted: 240 4% 16%;
	--muted-foreground: 240 5% 65%;
	--border: 240 4% 16%;
	--input: 240 6% 10%;
	--ring: 0 67% 47%;
	/* Tetra Bikes brand */
	--brand-red: 357 71% 47%;       /* #CC2229 */
	--brand-red-soft: 0 100% 65%;   /* #FF4D4D */
	--brand-red-dark: 354 80% 39%;  /* #B0131C */
	--brand-red-fg: 0 0% 100%;
}

body {
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: 'Barlow', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Reset del margen base de <p> (underscores) que se cuela en la UI Tailwind. */
body p { margin: 0; }
body .entry-content p,
body .prose p { margin-bottom: 1em; }
body ul, body ol { margin: 0; padding: 0; list-style: none; }
body .entry-content ul, body .prose ul { list-style: disc; margin: 0 0 1em 1.5em; padding: 0; }
body .entry-content ol, body .prose ol { list-style: decimal; margin: 0 0 1em 1.5em; padding: 0; }
body dl, body dd, body dt, body figure, body blockquote { margin: 0; }
body .entry-content dd, body .prose dd { margin: 0 0 1em 1.5em; }

.font-display { font-family: 'Molot', 'Anton', 'Bowlby One', sans-serif; letter-spacing: 0.02em; }

/* Logos de marca en blanco monocromo (mismo tratamiento que el home). */
.tb-brand-logo { filter: brightness(0) invert(1); }

/* Marquee carousel for brand logos */
@keyframes scroll-x {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.marquee {
	animation: scroll-x 28s linear infinite;
	will-change: transform;
}
.marquee:hover { animation-play-state: paused; }

/* Accordion: hide answer when not open */
details[data-faq] > summary { list-style: none; cursor: pointer; }
details[data-faq] > summary::-webkit-details-marker { display: none; }
details[data-faq][open] { border-color: hsl(var(--brand-red)); }
details[data-faq] .chev-plus { display: inline; }
details[data-faq] .chev-minus { display: none; }
details[data-faq][open] .chev-plus { display: none; }
details[data-faq][open] .chev-minus { display: inline; color: hsl(var(--brand-red)); }

/* Underscores' style.css enqueues globally and overrides anchor + input
   styles. The rules below win specificity to keep the landing visuals.    */

/* Kill browser default :visited (purple) — inherit base anchor colour. */
body a:visited,
body a:focus { color: inherit; }
/* Drop underline on all anchors inside the landing (sections/footer). */
body main a,
body header.sticky a,
body footer a { text-decoration: none; }

/* Primary CTA anchors — keep brand foreground white in every state. */
a.tb-cta-link,
a.tb-cta-link:link,
a.tb-cta-link:visited,
a.tb-cta-link:hover,
a.tb-cta-link:active,
a.tb-cta-link:focus {
	color: hsl(var(--brand-red-fg)) !important;
	text-decoration: none !important;
}

/* shadcn-style Input/Select baseline — uniform height, foreground text. */
input.tb-input,
select.tb-input,
textarea.tb-input {
	display: flex !important;
	height: 2.5rem !important; /* h-10 */
	width: 100% !important;
	border-radius: 0.375rem !important;
	border: 1px solid hsl(var(--border)) !important;
	background: hsl(var(--input)) !important;
	padding: 0 0.875rem !important;
	font-size: 1rem !important; /* ≥16px — evita zoom en iOS Safari */
	line-height: 1.25rem !important;
	color: hsl(var(--foreground)) !important;
	-webkit-text-fill-color: hsl(var(--foreground)) !important;
}
input.tb-input::placeholder,
textarea.tb-input::placeholder {
	color: hsl(var(--muted-foreground)) !important;
	-webkit-text-fill-color: hsl(var(--muted-foreground)) !important;
	opacity: 1;
}
input.tb-input:focus,
select.tb-input:focus,
textarea.tb-input:focus,
input.tb-input:focus-visible {
	outline: none !important;
	/* Focus en color foreground (blanco en landing dark). Mejor contraste que rojo. */
	box-shadow: 0 0 0 2px hsl(var(--foreground)) !important;
	border-color: hsl(var(--foreground)) !important;
}
/* Native select inherits the same baseline */
select.tb-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.25rem;
}
/* Autofill — keep dark background instead of yellow */
.tb-input:-webkit-autofill,
.tb-input:-webkit-autofill:hover,
.tb-input:-webkit-autofill:focus {
	-webkit-text-fill-color: hsl(var(--foreground));
	-webkit-box-shadow: 0 0 0 1000px hsl(var(--input)) inset;
	transition: background-color 9999s ease-in-out 0s;
}

/* Splash decorativo entre secciones — top normal, bottom espejo vertical. */
.detail-landing, .detail-landing-bottom {
	display: block;
	line-height: 0;
	background: hsl(var(--background));
}
.detail-landing img,
.detail-landing-bottom img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	pointer-events: none;
}
.detail-landing-bottom img {
	transform: scaleY(-1);
}

/* Hero image overlay */
.hero-bg {
	background-image:
		linear-gradient(to right, hsla(0,0%,0%,0.92) 0%, hsla(0,0%,0%,0.65) 55%, hsla(0,0%,0%,0.35) 100%),
		url('../img/hero-moto.jpg');
	background-size: cover;
	background-position: center;
}
@media (max-width: 768px) {
	.hero-bg {
		background-image:
			linear-gradient(to bottom, hsla(0,0%,0%,0.85) 0%, hsla(0,0%,0%,0.65) 100%),
			url('../img/hero-moto.jpg');
	}
}

/* =========================================================================
 *  Link in bio — fila de botones CHICOS de accesorios (variante .tb-bio-btn--sm).
 *  Comparten la clase .tb-bio-btn (transición + hover + active, definidos en el
 *  <style> del template), así que acá solo va el layout en columna y el tamaño.
 * ========================================================================= */
.tb-bio-sm-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}
.tb-bio-btn--sm {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.75rem 0.5rem; /* py-3 px-2 */
	text-align: center;
}
.tb-bio-sm-label {
	font-size: 0.75rem; /* text-xs */
	font-weight: 600;
	line-height: 1.2;
}
/* A 320px, "Chaquetas" a 12px queda justo: bajamos a 11px antes de romper la grilla. */
@media ( max-width: 360px ) {
	.tb-bio-sm-label { font-size: 11px; }
}