/* 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:var(--crw-font-sans)}
#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}}


/* === Global typography modernization (2026-08-15) === */
:root {
  --crw-font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
  font-size: 100%;
}

body,
button,
input,
select,
textarea {
  font-family: var(--crw-font-sans);
}

body {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--crw-font-sans);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

p,
li {
  line-height: 1.6;
}

button,
input,
select,
textarea {
  font-size: 1rem;
}


/* === Brand-aligned primary navigation (2026-08-15) === */
.WaGadgetMenuHorizontal.menuStyle006 .menuBackground {
  background: var(--crw-red);
}

.WaGadgetMenuHorizontal.menuStyle006 .menuInner ul.firstLevel > li > .item:hover > a,
.WaGadgetMenuHorizontal.menuStyle006 .menuInner ul.firstLevel > li.sel > .item > a,
.WaGadgetMenuHorizontal.menuStyle006 .menuInner ul.firstLevel > li.sel > .item:hover > a {
  background: var(--crw-green);
  color: var(--crw-gray-900);
}

.WaGadgetMenuHorizontal.menuStyle006 .menuInner ul.firstLevel > li > .item > a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
}

.WaGadgetMenuHorizontal.menuStyle006 .menuInner ul.secondLevel > li > .item > a {
  background-color: var(--crw-red);
}

.WaGadgetMenuHorizontal.menuStyle006 .menuInner ul ul.secondLevel > li > .item:hover > a,
.WaGadgetMenuHorizontal.menuStyle006 .menuInner ul ul.secondLevel > li:hover > .item > a,
.WaGadgetMenuHorizontal.menuStyle006 .menuInner ul.secondLevel > li.sel > .item > a {
  background-color: var(--crw-purple);
}


/* === Clean page surface (2026-08-15) === */
body {
  background-color: var(--crw-gray-200);
  background-image: linear-gradient(180deg, #fff 0, var(--crw-gray-200) 26rem);
  background-repeat: no-repeat;
}


/* Blog list previews: hide post images while preserving full-post images */
.WaGadgetBlog.WaGadgetBlogStateList .blogPostBody img {
  display: none !important;
}

/* CRW font consistency patch. */
font[face] { font-family: var(--crw-font-sans); }
.WaGadgetEventsStateDetails [style*="font-family"],
.WaGadgetEventsStateList [style*="font-family"] { font-family: var(--crw-font-sans) !important; }
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a,
.WaGadgetMenuHorizontal .menuInner ul ul li > .item > a,
.WaGadgetLoginButton .loginBoxLinkContainer .loginBoxLinkButton,
.formTitleOuterContainer .formTitleContainer .inner h3.formTitle,
.formTitleOuterContainer .formTitleContainer .inner .mandatoryFieldsTitle,
.navigationOuterContainer .navigationContainer .left input.nextButton,
.navigationOuterContainer .navigationContainer .left input.typeButton,
.navigationOuterContainer .navigationContainer .right input.nextButton,
.navigationOuterContainer .navigationContainer .right input.typeButton,
.WaGadgetBlog ul.blogCommentsList li.blogCommentItem .blogComment .commentViewContainer .boxHeaderOuterContainer h5 { font-family: var(--crw-font-sans); }
.crw-sms-start,
body .crw-sms-start h1 { font-family: var(--crw-font-sans) !important; }

/* Calendar category-link typography. */
#id_Sg6tSez a.stylizedButton.buttonStyle001,
#id_Sg6tSez a.stylizedButton.buttonStyle002,
#id_Sg6tSez a.stylizedButton.buttonStyle003 { font-family: var(--crw-font-sans); }