/* 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; }
}


/* CRW homepage campaign 2026-08 */
#crw-campaign-2026{margin:0 0 28px;color:#26252a;background:#fff;border-bottom:1px solid #ddd8d2;box-shadow:0 12px 28px rgba(31,28,34,.08);font-family:Arial,Helvetica,sans-serif}
#crw-campaign-2026>img{display:block;width:100%;height:min(52vw,520px);min-height:280px;object-fit:cover;object-position:center 62%}
#crw-campaign-2026 .notices{display:grid;grid-template-columns:1.15fr .85fr;border-top:4px solid #ed0052}
#crw-campaign-2026.store-only .notices{grid-template-columns:1fr}
#crw-campaign-2026 article{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px}
#crw-campaign-2026 article+article{border-left:1px solid #e3ded8}
#crw-campaign-2026 .label{display:block;margin-bottom:4px;color:#b4003e;font-size:12px;font-weight:700;letter-spacing:.11em;line-height:1.2;text-transform:uppercase}
#crw-campaign-2026 h2{margin:0 0 5px;color:#26252a;font-size:24px;line-height:1.15}
#crw-campaign-2026 p{margin:0;color:#615c65;font-size:16px;line-height:1.45}
#crw-campaign-2026 article>a{flex:none;padding:10px 12px;color:#c90045;border:2px solid #c90045;border-radius:3px;font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1;text-decoration:none;white-space:nowrap}
#crw-campaign-2026 article>a:hover,#crw-campaign-2026 article>a:focus{color:#fff;background:#c90045;outline:3px solid rgba(201,0,69,.28);outline-offset:2px}
@media(max-width:767px){#crw-campaign-2026{margin-bottom:22px}#crw-campaign-2026>img{height:72vw;min-height:240px;max-height:430px}#crw-campaign-2026 .notices{grid-template-columns:1fr}#crw-campaign-2026 article{align-items:flex-start;flex-direction:column;padding:18px}#crw-campaign-2026 article+article{border-top:1px solid #e3ded8;border-left:0}#crw-campaign-2026 h2{font-size:21px}#crw-campaign-2026 p{font-size:15px}}