/* ==============================================
   BikesDirect — Category Buttons (GRID VERSION)
   Date: 2025-08-11
   Notes:
   - Base layout only (grid + typography)
   - NO width forcing here; polish CSS controls equal-width pills
   - Safe for iPhone 12
   ============================================== */

/* Container is a grid; spacing is modest here
   (polish may tighten gap further) */
#bd-category-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile default */
  gap: 0.5em;
  width: 100%;
  max-width: 880px;
  margin: 1em auto;
  padding: 0; /* keep tight */
}

/* Desktop: 4 columns */
@media (min-width: 768px) {
  #bd-category-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75em 1em;
  }
}

/* Category pill base styles (no layout constraints here) */
.bd-category-btn {
  /* OLD (conflicts with polish equal-width) — leave commented:
  width: auto !important;            /* hug text *\/
  justify-self: center;              /* centers a text-sized pill *\/
  */

  /* NEW: layout-neutral — polish will decide width/justify */
  white-space: nowrap;               /* single line labels */
  padding: 0.3em 0.9em;              /* touch target */
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
  font-size: 1em;
  font-weight: 500;
  font-family: 'Urbanist', sans-serif;
  text-align: center;                /* label centered regardless of width */
  box-sizing: border-box;            /* safe if polish adds borders */
}

/* Mobile font bump */
@media (max-width: 767px) {
  .bd-category-btn {
    font-size: 0.90em;
  }
}

/* iPhone-specific niceties */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Hover treatment — visual-only; does not affect width
   (polish may add border/shadow; both can coexist) */
.bd-category-btn:hover,
.bd-category-btn:focus {
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
  background-color: transparent;
  cursor: pointer;
}

/* Neutralize legacy wrappers created by old JS */
.bd-button-row,
.bd-button-grid {
  display: contents !important;
}

/* === Header offset + gap (unchanged) === */
:root {
  --bd-header-gap: 1em; /* breathing room below fixed header */
}
.content-wrapper {
  margin-top: calc(var(--bd-header-height, 10px) + var(--bd-header-gap));
}
#bd-fixed-header .bd-header-trust-bar { margin: 0; }
@media (max-width: 430px) {
  :root { --bd-header-gap: 0.75em; }
}

/* === HERO HEADINGS (SEO + iPhone12 tuned) === */
.bd-hero-h1 {
  font-family: 'Jost', 'Roboto', Arial, sans-serif;
  font-weight: 600;
  font-size: 1.2em;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 4.0em 0 0.25em 0;
  text-align: center;
}
.bd-hero-h2 {
  font-family: 'Urbanist', 'Jost', Arial, sans-serif;
  font-weight: 400;
  font-size: .95em;          /* smaller than H1 */
  line-height: 1.1;
  letter-spacing: 0.005em;
  margin: 0 0 0.75em 0;
  text-align: center;
}
@media (max-width: 430px) {
  .bd-hero-h1 { font-size: 1.15em; line-height: 1.12; margin-top: 1.9em; }
  .bd-hero-h2 { font-size: .9em; line-height: 1.12; }
}

/* Force category pill text to black and kill any inherited link styling */
#bd-category-buttons .bd-category-btn,
#bd-category-buttons .bd-category-btn:link,
#bd-category-buttons .bd-category-btn:visited {
  color: #000 !important;
  text-decoration: none !important;
  background: #fff;           /* or transparent, whichever you prefer */
}

/* Optional: keep hover clean without turning blue/purple */
#bd-category-buttons .bd-category-btn:hover,
#bd-category-buttons .bd-category-btn:focus {
  color: #000 !important;
  text-decoration: none !important;
}