/* ==========================================================================
   Halifax Imperial Wheelers — main stylesheet
   Order: reset → base → layout → components.
   Tokens live in tokens.css. Everything here references those custom props.
   ========================================================================== */

/* ---- Reset / normalise --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* 18px root: scales the whole rem-based system up to match the design.
   (The design runs noticeably larger than a 16px baseline.) */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  /* The whole page sits on the subtle off-white band, NOT pure white. */
  background: var(--c-band);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--c-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

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

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 400; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--w-semibold); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

/* Accessibility skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-navy); color: #fff; padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---- Layout helpers ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A full-bleed coloured band that breaks out of the container */
.band { background: var(--c-band); }
.band--plain { background: var(--c-white); }
.band--lavender { background: var(--c-lavender); }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }

/* Serif section heading (Abril) */
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--c-navy);
  margin-bottom: var(--sp-5);
}
.section-intro {
  max-width: 46ch;
  color: var(--c-muted);
  margin-bottom: var(--sp-6);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-faint);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--fs-body);
  line-height: 1;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn--solid { background: var(--c-navy); color: #fff; }
.btn--solid:hover { background: #1d2a63; }

.btn--outline {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.btn--outline:hover { background: rgba(39, 54, 123, 0.06); }

/* Text link with trailing arrow (e.g. "More events", "Visit nopinz shop").
   Slightly larger than the body to read as a clear, tappable call to action. */
.btn--text {
  padding: 0;
  color: var(--c-navy);
  font-weight: var(--w-semibold);
  font-size: 1.1rem;
  background: none;
  border: none;
}
.btn--text .ico { font-size: 1.25rem; }
.btn--text:hover { gap: var(--sp-3); }

.ico { flex: none; }

/* ---- Header / nav -------------------------------------------------------- */
.site-header { background: var(--c-band); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
.brand:hover { text-decoration: none; }
/* Logo is a wide (landscape) badge — size by height, let width follow. */
.brand__logo { width: auto; height: 86px; }
.brand__name {
  /* Hidden visually (the badge carries the name) but kept for a11y/SEO */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.primary-nav a:not(.btn) {
  font-weight: var(--w-medium);
  color: var(--c-ink);
}
.primary-nav a:not(.btn):hover { text-decoration: none; color: var(--c-navy); }
.primary-nav a[aria-current="page"] { color: var(--c-navy); font-weight: var(--w-semibold); }

.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--c-navy); font-size: 1.6rem; padding: var(--sp-1);
}
.nav-toggle .ico { width: 1.6rem; height: 1.6rem; }
.nav-toggle__close { display: none; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { background: var(--c-band); }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--sp-7);
  align-items: center;
  padding-block: var(--sp-6) var(--sp-7);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* The hero image is square-cornered in the design (unlike other images). */
  border-radius: 0;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}
.hero__text { font-size: var(--fs-lead); color: var(--c-muted); max-width: 42ch; }

/* ---- Generic card -------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

/* ---- Accordion (native <details>) --------------------------------------- */
.accordion { display: grid; gap: var(--sp-3); }

.accordion__item {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: 0 var(--sp-5);
}
.accordion__item[open] { padding-bottom: var(--sp-5); }

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-weight: var(--w-medium);
  color: var(--c-navy);
  font-size: 1.3rem;
}
.accordion__body { padding-bottom: var(--sp-2); }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary .ico {
  color: var(--c-ink);
  transition: transform var(--transition);
  width: 1.1rem; height: 1.1rem;
}
.accordion__item[open] .accordion__summary .ico--chevron { transform: rotate(180deg); }

.accordion__body { color: var(--c-muted); font-size: var(--fs-small); }
.accordion__body > p { margin-bottom: var(--sp-3); }

/* FAQ variant: thin ruled rows with a +/− toggle, no card fill */
.faq { display: grid; }
.faq__item { border-bottom: 1px solid var(--c-hairline); padding: 0; }
.faq__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-5); cursor: pointer; list-style: none;
  color: var(--c-navy); font-weight: var(--w-medium); font-size: var(--fs-faq);
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary .ico { color: var(--c-ink); transition: transform var(--transition); font-size: 1.5rem; }
.faq__item[open] .faq__summary .ico { transform: rotate(45deg); } /* + becomes × */
.faq__body { color: var(--c-muted); font-size: var(--fs-body); padding-bottom: var(--sp-5); max-width: 80ch; }

/* ---- Event card ---------------------------------------------------------- */
.event-card {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.event-card__title {
  /* Sans (Figtree), not the Abril display serif — matches the design. */
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-h3);
  color: var(--c-navy);
  line-height: var(--lh-snug);
}
.event-card__meta { display: grid; gap: var(--sp-2); margin-block: var(--sp-1) var(--sp-2); }
.event-card__meta li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-small); color: var(--c-text);
}
.event-card__meta .ico { color: var(--c-ink); font-size: 1rem; }
.event-card__desc { color: var(--c-muted); font-size: var(--fs-small); }
.event-card__cta { margin-top: auto; padding-top: var(--sp-3); }

/* ---- Tables (records) ---------------------------------------------------- */
.record-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.record-table th {
  text-align: left;
  font-weight: var(--w-semibold);
  color: var(--c-faint);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--c-hairline);
  white-space: nowrap;
}
.record-table td {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--c-hairline);
  color: var(--c-text);
  vertical-align: top;
}
.record-table td:first-child { color: var(--c-navy); font-weight: var(--w-medium); }
.record-table .stacked { display: grid; gap: 2px; }
.record-table .stacked .muted { color: var(--c-faint); }
.table-scroll { overflow-x: auto; }

/* ---- Tabs (pills) -------------------------------------------------------- */
.tablist { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.tab {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-small);
  color: var(--c-ink);
  background: var(--c-surface);
  border: none;
  border-radius: var(--r-pill);
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.tab:hover { background: #ececec; }
.tab[aria-selected="true"] { background: var(--c-navy); color: #fff; }
.tabpanel[hidden] { display: none; }
.tabpanel__title {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: 1.25rem;
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}

/* ---- Carousel ------------------------------------------------------------ */
.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 24vw, 360px);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--sp-3);
  scrollbar-width: none;

  /* Full-viewport bleed: the track breaks out of the container so slides run
     edge to edge (and peek past both sides), while the first slide still lines
     up with the container's left edge via the inline padding. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { scroll-snap-align: start; }
.carousel__slide img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
}
.carousel__controls { display: flex; gap: var(--sp-2); }
.carousel__btn {
  display: none; /* shown by JS when overflow exists */
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-navy);
  background: var(--c-white);
  color: var(--c-navy);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.carousel__btn:disabled { opacity: 0.35; cursor: default; }

/* ---- Footer -------------------------------------------------------------- */
/* White in the design (the lavender belongs to the carousel band above it). */
.site-footer { background: var(--c-white); padding-top: var(--sp-9); }
.site-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
}
.site-footer__brand .brand__logo { width: auto; height: 84px; }
.site-footer__head {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: 1.2rem;
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}
.site-footer__links { display: grid; gap: var(--sp-3); }
.site-footer__links a { color: var(--c-muted); font-size: var(--fs-body); }
.site-footer__legal {
  border-top: 1px solid var(--c-hairline);
  padding-block: var(--sp-5);
  color: var(--c-faint);
  font-size: var(--fs-small);
}

/* ---- Utilities ----------------------------------------------------------- */
.flow > * + * { margin-top: var(--sp-4); }
.muted { color: var(--c-muted); }
.lead { font-size: var(--fs-lead); color: var(--c-muted); }

/* ==========================================================================
   Page compositions
   ========================================================================== */

/* Two-column split used for Regular Rides.
   align-items:start pins the accordion AND the image to the top, so opening a
   panel no longer shifts the image up and down. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}
.split__media--tall img { aspect-ratio: 4 / 5; }

/* Home intro: text offset into the right-hand (heading) column */
.home-intro { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--sp-7); }
.home-intro__body { grid-column: 2; color: var(--c-muted); }

/* Featured "Coming up next" event — full-bleed image on the left that runs to
   the viewport edge, with the content aligned to the container on the right. */
.events-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-8);
}
.events-feature__media { align-self: stretch; }
.events-feature__media img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  border-radius: 0 var(--r-lg) var(--r-lg) 0; /* rounded inner corners only */
}
.events-feature__body {
  padding-block: var(--sp-9);
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.event-feature__label { margin-bottom: var(--sp-4); }
.events-feature .event-card {
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  max-width: 560px;
}
.event-feature__more { margin-top: var(--sp-5); }

/* Events grid */
.events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

/* FAQ spans the full content width in the design */
.home-faq .faq { max-width: none; }

/* Carousel header / footer rows */
.carousel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.carousel-head .section-title { margin-bottom: 0; }
.carousel-foot { margin-top: var(--sp-5); }
.ico--left { transform: rotate(90deg); }
.ico--right { transform: rotate(-90deg); }

/* Club Rides — vertical tabs + meta panel inside one card */
.club-rides { display: grid; grid-template-columns: minmax(180px, 250px) 1fr; gap: var(--sp-6); }
.tablist--vertical { flex-direction: column; gap: 0; margin-bottom: 0; align-items: stretch; }
.club-rides__tab {
  font-family: var(--font-body);
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--c-hairline);
  padding: var(--sp-3) 0;
  font-size: 1.15rem;
  color: var(--c-faint);
  cursor: pointer;
  transition: color var(--transition);
}
.club-rides__tab:hover { color: var(--c-ink); }
.club-rides__tab[aria-selected="true"] { color: var(--c-navy); font-weight: var(--w-semibold); }

.ride-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.ride-meta li { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-navy); font-size: var(--fs-small); }
.ride-meta .ico { color: var(--c-ink); font-size: 1.1rem; }
.ride-meta__body { border-top: 1px solid var(--c-hairline); padding-top: var(--sp-4); color: var(--c-muted); font-size: var(--fs-small); }

/* Reserved placeholder (Ride Etiquette) */
.placeholder-block {
  background: var(--c-surface);
  border-radius: var(--r-md);
  min-height: 340px;
}

/* What to bring / Club Kit */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.kit-list { margin: var(--sp-4) 0 0; display: grid; gap: 2px; }
.kit-list dt { font-weight: var(--w-semibold); color: var(--c-text); font-size: var(--fs-small); margin-top: var(--sp-3); }
.kit-list dd { margin: 0; color: var(--c-muted); font-size: var(--fs-small); }
.kit-card { display: flex; flex-direction: column; }
.kit-card__cta { margin-top: var(--sp-5); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }

  .split,
  .home-intro,
  .events-grid,
  .club-rides,
  .two-col { grid-template-columns: 1fr; gap: var(--sp-5); }
  .home-intro__body { grid-column: 1; }

  /* Events feature stacks: image on top (full width), content below */
  .events-feature { grid-template-columns: 1fr; gap: 0; }
  .events-feature__media img { min-height: 280px; border-radius: 0; }
  .events-feature__body { padding: var(--sp-6) var(--gutter) var(--sp-7); }

  .tablist--vertical { flex-direction: row; flex-wrap: wrap; }
  .club-rides__tab { border-bottom: none; padding: var(--sp-2) 0; }
  .club-rides__tab[aria-selected="true"] { text-decoration: underline; text-underline-offset: 6px; }
}

@media (max-width: 680px) {
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    background: var(--c-white);
    box-shadow: -8px 0 40px rgba(39, 54, 123, 0.12);
    padding: var(--sp-8) var(--sp-5);
    transform: translateX(100%);
    transition: transform 200ms ease;
    z-index: 50;
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav__list { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  body.nav-open { overflow: hidden; }

  .section { padding-block: var(--sp-7); }
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ---- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .carousel__track { scroll-behavior: auto; }
}