/* ============================================================
   CJSC — Full-Width Layout Override
   Paste into Wild Apricot: Website > CSS customization
   This widens the site from the default 960px grid to a modern
   full-width layout (max 1400px content, edge-to-edge nav/footer).
   ============================================================ */

/* ── WIDEN THE 960 GRID ──────────────────────────────────────
   The WA theme uses .container_12 { width: 960px; margin: auto }
   which constrains all content. Override to fluid width.
   ──────────────────────────────────────────────────────────── */
.container_12 {
  width: 100% !important;
  max-width: 1100px !important;
}

/* Grid columns — let them fill the wider container */
[class*="s1_grid_"],
[class*="s2_grid_"],
[class*="s3_grid_"] {
  width: 100% !important;
}

/* ── NAV BAR — FULL BLEED ────────────────────────────────────
   Make the green nav bar stretch edge-to-edge, with links
   centered inside the max-width container.
   ──────────────────────────────────────────────────────────── */
.zoneHeader3 {
  width: 100% !important;
}
.zoneHeader3 .container_12 {
  max-width: 1400px !important;
  padding: 0 20px !important;
}

/* ── SLIDESHOW — FULL WIDTH ──────────────────────────────────
   The camera plugin renders at the old 960px width.
   Force all inner containers to stretch.
   ──────────────────────────────────────────────────────────── */
.WaGadgetSlideshow .camerarelative,
.WaGadgetSlideshow .camera_src {
  width: 100% !important;
}
.WaGadgetSlideshow .camera_target img,
.WaGadgetSlideshow .camerarelative img {
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

/* ── CONTENT AREA PADDING ────────────────────────────────────
   Add breathing room so content doesn't touch viewport edges.
   ──────────────────────────────────────────────────────────── */
.zoneContent .container_12,
.zoneHeader1 .container_12,
.zoneHeader2 .container_12,
.zoneHeader4 .container_12 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ── FOOTER — FULL BLEED ─────────────────────────────────────
   Match the nav bar treatment.
   ──────────────────────────────────────────────────────────── */
.zoneFooter1,
.zoneFooter2 {
  width: 100% !important;
}
.zoneFooter1 .container_12,
.zoneFooter2 .container_12 {
  max-width: 1400px !important;
  padding: 0 20px !important;
}

/* ── BREADCRUMB — HIDE OR STYLE ──────────────────────────────
   The "Home > Page" breadcrumb looks dated on a modern layout.
   Uncomment the next line to hide it, or leave visible.
   ──────────────────────────────────────────────────────────── */
/* .WaGadgetBreadcrumbs { display: none !important; } */

/* ── IMAGES — RESPONSIVE ─────────────────────────────────────
   Prevent images from overflowing the wider container.
   ──────────────────────────────────────────────────────────── */
.WaPlaceHolderContent img {
  max-width: 100% !important;
  height: auto !important;
}

/* ── WA GADGET TITLE BARS ────────────────────────────────────
   Restyle ALL gadget title bars from default blue to
   the green/gold brand palette.
   ──────────────────────────────────────────────────────────── */
.gadgetStyle004 .gadgetStyleTitle {
  border-left-color: #1F4E3D !important;
}

/* Solid-background title bars (Upcoming Events, Calendar, etc.) */
.gadgetStyleTitle {
  background-color: #1F4E3D !important;
  background: #1F4E3D !important;
  color: #fff !important;
}
.gadgetStyleTitleText,
.gadgetStyleTitle a,
.gadgetStyleTitle span {
  color: #fff !important;
}

/* Calendar gadget header */
.WaGadgetEvents .gadgetStyleTitle,
.WaGadgetUpcomingEvents .gadgetStyleTitle,
.WaGadgetCalendar .gadgetStyleTitle {
  background-color: #1F4E3D !important;
  background: #1F4E3D !important;
}

/* Gadget border color — replace default blue/teal with green */
[class*="gadgetStyle"] {
  border-color: rgba(31,78,61,0.25) !important;
}

/* Event links inside gadgets — green, gold on hover */
.WaGadgetEvents a,
.WaGadgetUpcomingEvents a {
  color: #1F4E3D !important;
}
.WaGadgetEvents a:hover,
.WaGadgetUpcomingEvents a:hover {
  color: #B8935E !important;
}

/* ── LINK COLORS ─────────────────────────────────────────────
   Default WA links may still be blue. Override to green.
   ──────────────────────────────────────────────────────────── */
.WaPlaceHolderContent a {
  color: #1F4E3D;
}
.WaPlaceHolderContent a:hover {
  color: #B8935E;
}