/*
Theme Name: TrainerSpotter
Theme URI: https://www.trainerspotter.co.uk/
Author: Melted Media Ltd
Description: Affiliate trainer comparison theme. Design exported from Lovable (compiled Tailwind in assets/app.css). Reads product data from post meta, with a fallback that parses the legacy post HTML.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: trainerspotter
*/

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}

/* Search form */
.ts-search{display:flex}
.ts-search input[type=search]{border:1px solid var(--border);border-right:0;border-radius:calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);padding:.4rem .75rem;font-size:.875rem;background:var(--card);color:var(--foreground);min-width:0;width:11rem}
.ts-search button{border:1px solid var(--foreground);background:var(--foreground);color:var(--background);padding:.4rem .9rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border-radius:0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;cursor:pointer}

/* Pagination */
.ts-pagination{margin-top:3rem}
.ts-pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.ts-pagination .page-numbers{border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);padding:.5rem .9rem;font-size:.875rem;font-weight:600}
.ts-pagination a.page-numbers:hover{background:var(--foreground);color:var(--background)}
.ts-pagination .page-numbers.current{background:var(--accent);color:var(--accent-foreground);border-color:var(--foreground)}
.ts-pagination .page-numbers.dots{border-color:transparent}

/* Blog / page content */
.ts-article{max-width:48rem;margin:0 auto;padding:3rem 1rem}
.ts-article h1{font-family:"Archivo Black",Archivo,sans-serif;font-size:2.25rem;line-height:1.1;margin-bottom:1.5rem}
.ts-article .ts-hero-img{width:100%;height:auto;border-radius:calc(var(--radius) - 2px);margin-bottom:2rem}
.ts-content{line-height:1.7}
.ts-content h2,.ts-content h3{font-family:"Archivo Black",Archivo,sans-serif;line-height:1.2;margin:2rem 0 .75rem}
.ts-content h2{font-size:1.5rem}
.ts-content h3{font-size:1.2rem}
.ts-content p,.ts-content ul,.ts-content ol{margin:0 0 1rem}
.ts-content ul{list-style:disc;padding-left:1.25rem}
.ts-content ol{list-style:decimal;padding-left:1.25rem}
.ts-content a{text-decoration:underline;text-underline-offset:3px}
.ts-content img{max-width:100%;height:auto;border-radius:calc(var(--radius) - 2px)}
.ts-seo{max-width:64rem;margin:5rem 0 0}

/* Blog card (non-product posts in lists) */
.ts-postcard img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--radius) - 2px)}

/* Sale price */
.ts-was{font-family:Archivo,system-ui,sans-serif;font-size:1rem;font-weight:500;text-decoration:line-through;color:var(--muted-foreground);margin-left:.75rem}
.ts-save{font-family:Archivo,system-ui,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.05em;background:var(--accent);color:var(--accent-foreground);padding:.2rem .5rem;border-radius:calc(var(--radius) - 4px);margin-left:.5rem;vertical-align:middle}
.ts-desc{line-height:1.6}

/* Hero headline: stop the highlight overlapping the line above */
.ts-hero-title{line-height:1.08}
.ts-hero-hl{display:inline-block;line-height:1.02;margin-top:.08em}
.ts-lead{max-width:44rem}

/* Load more */
.ts-more-wrap{margin-top:3rem;text-align:center}
.ts-more-btn{display:inline-block;font-family:"Archivo Black",Archivo,sans-serif;font-size:1.125rem;background:var(--accent);color:var(--accent-foreground);padding:1rem 2.5rem;border-radius:calc(var(--radius) - 2px);box-shadow:var(--shadow-cta);transition:transform .15s}
.ts-more-btn:hover{transform:translateY(-2px)}
.ts-more-btn[aria-busy="true"]{opacity:.6;pointer-events:none}

/* Sale price on cards */
.ts-card-was{display:block;font-size:.75rem;text-decoration:line-through;color:var(--muted-foreground)}
.ts-card-save{position:absolute;right:.75rem;top:.75rem;background:var(--accent);color:var(--accent-foreground);font-size:10px;font-weight:700;letter-spacing:.1em;padding:.25rem .5rem;border-radius:calc(var(--radius) - 4px)}
