/* Oscar's Bike Shop — shared stylesheet. Mobile-first, no framework, no JS required. */

:root {
  --color-text: #121110;
  --color-text-muted: #4b4b4b;
  --color-bg: #ffffff;
  --color-bg-alt: #f2f3f5;
  --color-black: #0a0a0a;
  --color-on-dark: #f5f5f5;
  --color-on-dark-muted: #c7c7c7;
  --color-border: #e1e1e3;
  --color-border-on-dark: #3a3a3a;
  --color-primary: #d81f2a;        /* the shop's sign red */
  --color-primary-dark: #a8121c;
  --color-focus: #1257c9;
  --color-placeholder-border: #c7c2ba;
  --color-placeholder-text: #5c584f;
  --max-width: 76.25rem;           /* ~1220px */
  --radius: 8px;
  font-size: 100%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* <picture> is only a wrapper for the WebP source; the <img> inside is what the layout
   rules below style, so keep the wrapper out of the box tree. */
picture {
  display: contents;
}

h1, h2, h3 {
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 0.6rem;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
}

h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

a {
  color: var(--color-primary-dark);
}

a:hover {
  color: var(--color-primary);
}

/* Visible focus state everywhere — never remove outline */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-primary);
  color: #fff;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  min-height: 44px;
  white-space: nowrap;
}

@media (max-width: 26rem) {
  .header-bar {
    gap: 0.5rem;
    padding: 0.65rem 1rem;
  }

  .logo {
    font-size: 1rem;
  }

  .header-call {
    font-size: 0.8rem;
    padding: 0.5rem 0.65rem;
  }
}

.header-call:hover,
.header-call:focus-visible {
  background: var(--color-primary-dark);
  color: #fff;
}

.site-nav {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.site-nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0.25rem 1.5rem;
  max-width: var(--max-width);
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 0.25rem 1.5rem;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.1rem;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

@media (max-width: 26rem) {
  .site-nav ul {
    padding: 0.25rem 0.75rem;
    gap: 0.25rem 0.6rem;
  }

  .site-nav a {
    font-size: 0.8rem;
  }
}

/* ---------- Home page full-bleed hero ---------- */

.hero-home {
  position: relative;
  height: 70vh;
  min-height: 460px;
  max-height: 820px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero-home .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  margin: 0;
}

.hero-home .hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0) 80%);
}

.hero-home .hero-text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 3rem;
  padding-bottom: clamp(2rem, 6vw, 4rem);
  color: #fff;
}

.hero-home h1 {
  color: #fff;
  max-width: 34rem;
}

.hero-home .value-prop {
  color: #ececec;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  max-width: 34rem;
  margin: 0 0 1.5rem;
}

/* Interior-page variant of the home hero: same image + scrim + bottom-left text, but
   shorter, so the content below it starts near the top of the screen. */
.hero-home.hero-page {
  height: 65vh;
  min-height: 380px;
  max-height: 720px;
}

/* About photo: the subject (head, shoulders, hand on the mouse) sits low and right of
   centre, so bias the crop down and, on narrow screens, toward the subject. */
.hero-home.hero-page .hero-media {
  object-position: center 48%;
}

@media (max-width: 700px) {
  .hero-home.hero-page .hero-media {
    object-position: 62% 48%;
  }
}

/* ---------- Page-band image (interior pages) ---------- */

.page-band {
  position: relative;
  width: 100%;
  height: clamp(260px, calc(100vw / 2.4), 520px);
  overflow: hidden;
}

@media (max-width: 700px) {
  .page-band {
    height: clamp(200px, calc(100vw / 1.9), 420px);
  }
}

.page-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
}

/* ---------- Hero text block (interior pages) ---------- */

/* Vertical padding only: these blocks are also .container, and the shorthand
   `padding: X 0` would wipe out the container's horizontal padding. */
.hero {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.hero .value-prop {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  max-width: 42rem;
  margin: 0 0 1.25rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
}

/* ---------- Trust signal & lead-time note — inline, not boxed ---------- */

.trust-signal {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}

.trust-signal::first-letter {
  color: var(--color-primary);
}

.hero-home .trust-signal {
  color: inherit;
}

/* Quieter strip below the hero: wait-time status line with a small red dot, no red rule */
.lead-strip {
  background: var(--color-bg-alt);
  padding: 1.1rem 0;
}

.lead-time-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: 48rem;
  text-wrap: balance;
}

/* Fixed column, so a wrapped second line aligns with the text, not the dot.
   A quiet static ring (box-shadow spread) is always there; a radar-ping ring
   (::before) grows from the dot and fades to nothing every 2.2s so the strip reads as
   live. The ping stops at 3x, about 9px past the dot edge, inside the 0.6rem gap to the
   text, so it never runs under the words. rgba(216,31,42) is --color-primary. */
.status-dot {
  position: relative;
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(216, 31, 42, 0.18);
}

.status-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(216, 31, 42, 0.45);
  transform: scale(1);
  opacity: 0;
  pointer-events: none;
  /* Growth eases out; the fade is linear so the ring stays visible while it expands */
  animation:
    status-ping-grow 2.2s cubic-bezier(0, 0, 0.2, 1) infinite,
    status-ping-fade 2.2s linear infinite;
}

@keyframes status-ping-grow {
  0%   { transform: scale(1); }
  80%, 100% { transform: scale(3); }
}

@keyframes status-ping-fade {
  0%   { opacity: 0.45; }
  80%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot::before { animation: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-primary-dark);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-text);
  color: #fff;
}

.hero-home .btn-secondary {
  color: #fff;
  border-color: #fff;
}

.hero-home .btn-secondary:hover,
.hero-home .btn-secondary:focus-visible {
  background: #fff;
  color: var(--color-black);
}

.section-dark .btn-secondary {
  color: #fff;
  border-color: #fff;
}

.section-dark .btn-secondary:hover,
.section-dark .btn-secondary:focus-visible {
  background: #fff;
  color: var(--color-black);
}

/* ---------- Sections ---------- */

/* Vertical padding only, so `.section.container` (404) keeps its side padding. */
.section {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-dark {
  background: var(--color-black);
  color: var(--color-on-dark);
}

.section-dark h2,
.section-dark h3 {
  color: #fff;
}

.section-dark p {
  color: var(--color-on-dark-muted);
}

.section-dark li {
  color: var(--color-on-dark-muted);
}

.section-dark li::marker {
  color: var(--color-primary);
}

.section-dark a:not(.btn) {
  color: #fff;
  text-decoration: underline;
}

.section-dark a:not(.btn):hover,
.section-dark a:not(.btn):focus-visible {
  color: #fff;
  text-decoration-thickness: 2px;
}

.section-dark .price-note {
  color: var(--color-on-dark-muted);
}

.section-dark .form-field label {
  color: #fff;
}

.section-dark .form-field input,
.section-dark .form-field textarea {
  background: #fff;
  color: var(--color-text);
  border-color: var(--color-border-on-dark);
}

.section-dark .form-note {
  color: var(--color-on-dark-muted);
}

/* ---------- Reviews (home page) ---------- */

.review-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

.review-grid .placeholder {
  margin: 0;
  height: 100%;
}

.review {
  border-top: 3px solid var(--color-primary);
  padding-top: 1rem;
}

.review p:first-child {
  margin-top: 0;
  color: var(--color-text);
}

.review-attribution {
  margin: 0.75rem 0 0;
  font-style: normal;
  font-weight: 700;
}

@media (min-width: 44rem) {
  .review-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Compact location block (home page) ---------- */

.location-block {
  max-width: 30rem;
}

.location-block p {
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

.location-block a {
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* ---------- Feature grid (no cards — image, heading, text) ---------- */

.feature-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}

.feature img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  margin: 0 0 1.25rem;
}

.feature h3 {
  margin: 0 0 0.5rem;
}

.feature p {
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}

.feature a {
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* ---------- Category list (bikes page — types carried, not inventory) ---------- */

.category-list {
  display: grid;
  gap: 1.5rem;
  margin: 0 0 2rem;
}

.category-list dt {
  font-weight: 700;
  font-size: 1.1rem;
}

.category-list dd {
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
}

.reason-list {
  display: grid;
  gap: 1.25rem;
  margin: 0;
}

.reason-list dt {
  font-weight: 700;
}

.reason-list dd {
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
}

/* ---------- Brand list (Bikes — other brands carried, supporting detail under
   categories, never competing with Specialized for prominence) ---------- */

.brand-list {
  margin-top: 2rem;
}

.brand-list-heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 0.35rem;
}

.brand-list-intro {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 0.35rem;
}

.brand-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.brand-list-items li:not(:last-child) {
  margin-right: 0.9rem;
  padding-right: 0.9rem;
  border-right: 1px solid var(--color-border);
}

/* ---------- Story photo (About — one large, uncropped image) ---------- */

/* The photo sits inside the story as a visual break between two text columns. Native
   aspect ratio, never cropped: the whole subject (mechanic + bike + stand) matters. */
.story-photo {
  width: 100%;
  max-width: 60rem;
  margin: 3rem auto;
}

.story-text {
  max-width: 38rem;
  margin: 0 auto;
}

.story-text p {
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Pull quote: set apart from the body copy by scale, weight and a red rule */
.pull-quote {
  margin: 2.5rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 4px solid var(--color-primary);
}

.pull-quote blockquote {
  margin: 0;
}

.story-text .pull-quote p {
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
}

.pull-quote figcaption {
  margin-top: 0.9rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* Closing line: centered and heavy, so it lands as a sign-off, not another paragraph */
.story-text .story-close {
  margin: 3rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ---------- Split (image + text, 50/50) ---------- */

.split {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

.placeholder-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Full, uncropped image — for photos where the whole subject matters */
.split-media-full img {
  aspect-ratio: auto;
  object-fit: contain;
}

/* ---------- Tables (prices, hours) ---------- */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 20rem;
}

caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

th,
td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
}

th {
  background: var(--color-bg-alt);
  font-weight: 700;
}

.section-dark th {
  background: #1a1a1a;
  color: #fff;
}

.section-dark td {
  border-bottom-color: var(--color-border-on-dark);
}

td.price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

th.price {
  text-align: right;
}

.price-note {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.item-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ---------- Placeholder styling — must be unmistakable ---------- */

.placeholder {
  display: block;
  border: 2px dashed var(--color-placeholder-border);
  border-radius: var(--radius);
  color: var(--color-placeholder-text);
  background: transparent;
  padding: 0.85rem 1rem;
  font-style: italic;
  font-size: 0.95rem;
}

/* ---------- Forms ---------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 1rem;
  max-width: 28rem;
}

.form-field label {
  font-weight: 700;
  font-size: 0.95rem;
}

.form-field input,
.form-field textarea {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  min-height: 44px;
}

.form-field textarea {
  min-height: 8rem;
}

.form-note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ---------- Map ---------- */

.map-frame {
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  overflow: hidden;
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

/* ---------- Related links ---------- */

/* Vertical padding only: also .container, see .hero. */
.related-links {
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.related-links h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
}

.related-links ul {
  margin: 0;
  padding-left: 1.1rem;
}

.related-links li {
  margin-bottom: 0.4rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-black);
  color: var(--color-on-dark);
  padding: 3rem 0 1.5rem;
  margin-top: 0;
}

.site-footer a {
  color: #fff;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-primary);
}

.footer-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}

.footer-grid h2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-on-dark-muted);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid li {
  margin-bottom: 0.4rem;
}

.footer-business-name {
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 0.35rem;
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid var(--color-border-on-dark);
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: 0.85rem;
  color: var(--color-on-dark-muted);
}

/* ---------- Policy pages (privacy-policy.html, terms-and-conditions.html) ---------- */

.policy {
  max-width: 44rem;
}

.policy h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  margin: 2rem 0 0.5rem;
}

.policy p {
  margin: 0 0 1rem;
}

/* ---------- Utility ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* ---------- Larger screens ---------- */

@media (min-width: 44rem) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .category-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}