/* Charles River Wheelers – Bookshelf Theme Overrides (Wild Apricot)
   Paste this file into Settings â–¸ Website â–¸ Theme Overrides â–¸ style.css
   Matches the built‑in **Bookshelf** theme but keeps the WA page editor intact.
   Last updated: 2025‑06‑09 */

/* === Brand palette (sampled from CRW logo) ===
      Adjust hex codes if your official style‑guide differs. */
:root {
  --crw-purple: #50308F;  /* lead cyclist */
  --crw-red:    #C8104D;  /* tagline & left cyclist */
  --crw-green:  #8BC34A;  /* middle cyclist */
  --crw-gray-900: #222;  /* headings */
  --crw-gray-700: #555;  /* body text */
  --crw-gray-200: #f7f7f7; /* light bg */
  --crw-font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* === Global resets === */
body {
  font-family: var(--crw-font-sans);
  color: var(--crw-gray-700);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 90rem; /* keeps ultra‑wide displays readable */
}

h1, h2, h3, h4, h5, h6 {
  color: var(--crw-gray-900);
  font-weight: 700;
  line-height: 1.25;
}

/* === Header === */
header#wb_header {
  background: white; /* keep it clean */
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

#wb_header .main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1rem;
}

/* Logo */
#wb_header img.logo {
  max-height: 64px; /* smaller than default Bookshelf */
  height: auto;
}

/* Nav links */
#wb_header ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

#wb_header ul.menu li a {
  text-decoration: none;
  color: var(--crw-gray-700);
  font-weight: 500;
  padding: .25rem .5rem;
  transition: color .2s ease;
}

#wb_header ul.menu li a:hover,
#wb_header ul.menu li a:focus {
  color: var(--crw-purple);
}

/* Primary CTA in nav */
#wb_header a.nav-cta {
  background: var(--crw-purple);
  color: #fff;
  border-radius: 4px;
  padding: .4rem .9rem;
  font-weight: 600;
}

#wb_header a.nav-cta:hover {
  background: var(--crw-red);
}

/* === Hero Section (home page only) === */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 560px;
  background: url("/Resources/Pictures/hero_crw.jpg") center/cover no-repeat;
  color: #fff;
  padding: 2rem 1rem;
}

.hero h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}

.cta, .cta.ghost {
  display: inline-block;
  margin: .5rem .35rem;
  padding: .65rem 1.4rem;
  font-weight: 600;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: all .2s ease;
}

.cta {
  background: var(--crw-purple);
  color: #fff;
}
.cta:hover { background: var(--crw-red); }

.cta.ghost {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.cta.ghost:hover {
  background: rgba(255,255,255,.15);
}

/* === Buttons (site‑wide) === */
button, [type="button"], [type="submit"], .Button {
  background: var(--crw-purple);
  color: #fff;
  border-radius: 4px;
  border: none;
  padding: .5rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  transition: background .2s ease;
}

button:hover, [type="button"]:hover, [type="submit"]:hover, .Button:hover {
  background: var(--crw-red);
}

/* === Links & states === */
a { color: var(--crw-purple); }
a:hover { color: var(--crw-red); }

/* === Utilities === */
.img-responsive { max-width: 100%; height: auto; }

/* Lazy‑loading on older WA pages */
img:not([loading]) { loading: lazy; }

/* === Media queries === */
@media (max-width: 1024px) {
  #wb_header ul.menu { display: none; } /* hide until WA hamburger handles */
  #wb_header .wa_menu_mobile_button { display: block; }
}