/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --color-bg:#fafafa;
  --color-surface:#fff;
  --color-text:#1a1a1a;
  --color-text-secondary:#555;
  --color-border:#e2e2e2;
  --color-accent:#2563eb;
  --color-accent-hover:#1d4ed8;
  --color-muted:#f5f5f5;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
  --max-width:1080px;
  --radius:8px;
  --radius-lg:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 2px 8px rgba(0,0,0,.08);
  --transition:150ms ease;
}

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  font-family:var(--font-sans);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-accent-hover)}

/* === Layout === */
.site-container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
}

/* === Header === */
.site-header{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  position:sticky;
  top:0;
  z-index:100;
}

.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:60px;
}

.site-logo{
  font-size:1.15rem;
  font-weight:700;
  color:var(--color-text);
  letter-spacing:-.02em;
}
.site-logo:hover{color:var(--color-text)}

.site-logo span{
  color:var(--color-accent);
}

/* === Navigation === */
.main-nav{display:flex;align-items:center;gap:4px}

.main-nav a,
.main-nav button{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 12px;
  font-size:.875rem;
  font-weight:500;
  color:var(--color-text);
  background:none;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:background var(--transition),color var(--transition);
  white-space:nowrap;
  font-family:inherit;
}

.main-nav a:hover,
.main-nav button:hover{
  background:var(--color-muted);
}

/* Dropdown */
.nav-dropdown{position:relative}

.nav-dropdown .dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  min-width:220px;
  padding:6px 0;
  z-index:200;
}

/* Desktop: hover to open */
@media(min-width:769px){
  .nav-dropdown:hover .dropdown-menu{
    display:block;
  }
}

/* Mobile: only open via JS class */
.nav-dropdown.open .dropdown-menu{
  display:block;
}

.dropdown-menu a{
  display:block;
  padding:8px 16px;
  font-size:.85rem;
  color:var(--color-text);
  border-radius:0;
}
.dropdown-menu a:hover{background:var(--color-muted)}

/* Chevron */
.nav-chevron{
  width:12px;
  height:12px;
  transition:transform var(--transition);
}
.nav-dropdown:hover .nav-chevron,
.nav-dropdown.open .nav-chevron{transform:rotate(180deg)}

/* Mobile toggle */
.menu-toggle{
  display:none;
  background:none;
  border:none;
  padding:8px;
  cursor:pointer;
  color:var(--color-text);
}

.menu-toggle svg{width:24px;height:24px}

/* Mobile nav */
@media(max-width:768px){
  .menu-toggle{display:block}

  .main-nav{
    display:none;
    position:fixed;
    top:60px;
    left:0;right:0;bottom:0;
    background:var(--color-surface);
    flex-direction:column;
    padding:20px;
    gap:2px;
    overflow-y:auto;
    border-top:1px solid var(--color-border);
  }

  .main-nav.is-open{display:flex}

  .nav-dropdown{
    width:100%;
  }

  .main-nav a,
  .main-nav button{
    width:100%;
    padding:12px 16px;
    font-size:1rem;
    justify-content:space-between;
    text-align:left;
  }

  .nav-dropdown .dropdown-menu{
    position:static;
    box-shadow:none;
    border:none;
    padding:0 0 0 16px;
    width:100%;
  }

  .nav-dropdown .dropdown-menu a{
    padding:10px 16px;
    font-size:.9rem;
  }
}

/* === Hero === */
.page-hero{
  padding:48px 0 40px;
}

.page-hero h1{
  font-size:2rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.03em;
  margin-bottom:12px;
}

.page-hero .hero-desc{
  font-size:1.05rem;
  color:var(--color-text-secondary);
  max-width:640px;
  line-height:1.6;
}

@media(min-width:768px){
  .page-hero{padding:64px 0 48px}
  .page-hero h1{font-size:2.6rem}
}

/* === Homepage === */
.home-section{margin-bottom:48px}
.home-section:last-child{margin-bottom:64px}

.section-heading{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:20px;
  letter-spacing:-.01em;
}

/* Card grid */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media(min-width:520px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
  .card-grid{grid-template-columns:repeat(3,1fr)}
}

.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:box-shadow var(--transition),transform var(--transition);
}

.card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.card-image{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--color-muted);
}

.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card-body{padding:16px}

.card-body h3{
  font-size:1rem;
  font-weight:600;
  margin-bottom:6px;
  line-height:1.3;
}
.card-body h3 a{color:var(--color-text)}
.card-body h3 a:hover{color:var(--color-accent)}

.card-meta{
  font-size:.8rem;
  color:var(--color-text-secondary);
}

.card-excerpt{
  font-size:.875rem;
  color:var(--color-text-secondary);
  margin-top:8px;
  line-height:1.5;
}

/* === Breadcrumbs === */
.breadcrumbs{
  font-size:.8rem;
  color:var(--color-text-secondary);
  padding:16px 0 0;
}
.breadcrumbs a{color:var(--color-text-secondary)}
.breadcrumbs a:hover{color:var(--color-accent)}
.breadcrumbs .sep{margin:0 6px;opacity:.4}

/* === Article Content === */
.article-header{
  padding:40px 0 24px;
  max-width:720px;
}

.article-header h1{
  font-size:1.9rem;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
  margin-bottom:12px;
}

/* Author byline with avatar */
.author-byline{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
}

.author-byline img{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

.author-byline__text{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.author-byline__name{
  font-size:.9rem;
  font-weight:600;
  color:var(--color-text);
  text-decoration:none;
}

.author-byline__name:hover{
  color:var(--color-accent);
}

.author-byline__dates{
  font-size:.8rem;
  color:var(--color-text-secondary);
}

.article-category{
  margin-top:12px;
}

.article-category a{
  display:inline-block;
  padding:3px 10px;
  font-size:.75rem;
  font-weight:600;
  color:var(--color-accent);
  border:1px solid var(--color-accent);
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.article-category a:hover{
  background:var(--color-accent);
  color:#fff;
}

.article-meta{
  font-size:.85rem;
  color:var(--color-text-secondary);
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

@media(min-width:768px){
  .article-header h1{font-size:2.25rem}
}

.article-content{
  max-width:720px;
  padding-bottom:48px;
}

.article-content h2{
  font-size:1.4rem;
  font-weight:700;
  margin:36px 0 12px;
  letter-spacing:-.01em;
}

.article-content h3{
  font-size:1.15rem;
  font-weight:600;
  margin:28px 0 10px;
}

.article-content p{
  margin-bottom:16px;
  line-height:1.7;
}

.article-content ul,
.article-content ol{
  margin:0 0 16px 24px;
  line-height:1.7;
}

.article-content li{margin-bottom:4px}

.article-content blockquote{
  border-left:3px solid var(--color-accent);
  padding:12px 20px;
  margin:20px 0;
  background:var(--color-muted);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--color-text-secondary);
  font-style:italic;
}

.article-content img{
  border-radius:var(--radius);
  margin:20px 0;
}

.article-content figure{
  margin:24px 0;
}

.article-content figcaption{
  font-size:.8rem;
  color:var(--color-text-secondary);
  margin-top:8px;
  text-align:center;
}

.article-content table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0;
  font-size:.9rem;
}

.article-content th,
.article-content td{
  text-align:left;
  padding:10px 14px;
  border-bottom:1px solid var(--color-border);
}

.article-content th{
  font-weight:600;
  background:var(--color-muted);
}

/* === Table of Contents === */
.tb-toc{
  background:var(--color-muted);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:0;
  margin:0 0 32px;
  max-width:480px;
}

.tb-toc__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  font-size:.9rem;
  font-weight:700;
  color:var(--color-text);
  cursor:pointer;
  user-select:none;
}

.tb-toc__icon{
  transition:transform 150ms ease;
}

.tb-toc.is-open .tb-toc__icon{
  transform:rotate(180deg);
}

.tb-toc__list{
  display:none;
  margin:0;
  padding:0 20px 16px 36px;
  list-style:decimal;
}

.tb-toc.is-open .tb-toc__list{
  display:block;
}

.tb-toc__list li{
  padding:4px 0;
  font-size:.85rem;
  line-height:1.4;
}

.tb-toc__list a{
  color:var(--color-text);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--transition),border-color var(--transition);
}

.tb-toc__list a:hover{
  color:var(--color-accent);
  border-bottom-color:var(--color-accent);
}

/* Responsive tables */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:20px 0;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
}

.table-wrap table{margin:0}
.table-wrap th:first-child,
.table-wrap td:first-child{padding-left:16px}

/* === Product cards (gear pages) === */
.product-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:24px;
  margin:24px 0;
}

.product-card h3{
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:12px;
}

.product-specs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  margin:12px 0 16px;
  font-size:.85rem;
}

.product-specs dt{
  color:var(--color-text-secondary);
  font-weight:500;
}

.product-specs dd{
  font-weight:600;
  margin-bottom:8px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 20px;
  background:var(--color-accent);
  color:#fff;
  font-size:.875rem;
  font-weight:600;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--transition);
}
.btn:hover{background:var(--color-accent-hover);color:#fff}

.btn-outline{
  background:transparent;
  color:var(--color-accent);
  border:1px solid var(--color-accent);
}
.btn-outline:hover{
  background:var(--color-accent);
  color:#fff;
}

/* === Score badge === */
.score-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--color-accent);
  color:#fff;
  font-size:.85rem;
  font-weight:700;
  flex-shrink:0;
}

/* === Sidebar === */
@media(min-width:900px){
  .content-with-sidebar{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:40px;
  }
}

.sidebar .widget{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:20px;
}

.sidebar .widget-title{
  font-size:.95rem;
  font-weight:700;
  margin-bottom:12px;
}

.sidebar .widget ul{
  list-style:none;
}

.sidebar .widget li{
  padding:6px 0;
  border-bottom:1px solid var(--color-border);
  font-size:.875rem;
}
.sidebar .widget li:last-child{border-bottom:none}
.sidebar .widget li a{color:var(--color-text)}
.sidebar .widget li a:hover{color:var(--color-accent)}

/* === FAQ === */
.faq-item{
  border-bottom:1px solid var(--color-border);
  padding:16px 0;
}

.faq-question{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  background:none;
  border:none;
  font-size:1rem;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  color:var(--color-text);
  font-family:inherit;
  padding:0;
}

.faq-question svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  transition:transform var(--transition);
  color:var(--color-text-secondary);
}

.faq-item.is-open .faq-question svg{
  transform:rotate(180deg);
}

.faq-answer{
  display:none;
  padding:12px 0 4px;
  font-size:.925rem;
  color:var(--color-text-secondary);
  line-height:1.6;
}

.faq-item.is-open .faq-answer{display:block}

/* === Gym cards === */
.gym-card{
  display:flex;
  gap:16px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:16px;
  align-items:center;
}

.gym-card h3{
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:4px;
}

.gym-card p{
  font-size:.85rem;
  color:var(--color-text-secondary);
}

/* === Archive / Blog listing === */
.archive-header{
  padding:40px 0 32px;
}

.archive-header h1{
  font-size:1.8rem;
  font-weight:800;
}

.pagination{
  display:flex;
  gap:8px;
  justify-content:center;
  padding:32px 0 48px;
}

.pagination a,
.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 10px;
  border:1px solid var(--color-border);
  border-radius:6px;
  font-size:.85rem;
  font-weight:500;
  color:var(--color-text);
}
.pagination a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.pagination .current{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}

/* === Footer === */
.site-footer{
  background:var(--color-text);
  color:rgba(255,255,255,.7);
  padding:40px 0;
  margin-top:48px;
}

.footer-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:24px;
}

.footer-nav{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.footer-nav a{
  color:rgba(255,255,255,.7);
  font-size:.85rem;
}
.footer-nav a:hover{color:#fff}

.footer-copy{
  font-size:.8rem;
  color:rgba(255,255,255,.45);
}

.footer-disclosure{
  width:100%;
  font-size:.75rem;
  color:rgba(255,255,255,.35);
  line-height:1.5;
  margin-top:8px;
}

/* === Search page === */
.search-form{
  display:flex;
  gap:8px;
  max-width:480px;
  margin-bottom:24px;
}

.search-form input[type="search"]{
  flex:1;
  padding:10px 14px;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  font-size:.95rem;
  font-family:inherit;
}

.search-form button{
  composes:btn;
}

/* === 404 === */
.error-404{
  text-align:center;
  padding:80px 20px;
}

.error-404 h1{
  font-size:4rem;
  font-weight:800;
  margin-bottom:12px;
}

.error-404 p{
  font-size:1.1rem;
  color:var(--color-text-secondary);
  margin-bottom:24px;
}

/* === Utility === */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}