/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */

/* 
 * Games Template CSS
 * 
 */

li.ev_td_li {
   padding-left: 11px;
}

tr.table-striped:nth-child(even) {
  background-color: aliceblue;
}


button.fa {
    color: #044283;
    border-color: #044283;
}

span.month {
    padding: 8%;
    border-style: solid;
    border-radius: 11px;
}

.cca-program-link-partner {
    background-color: #d0c5ff;
    color: white;
    padding: 5%;
    border-radius: 9px;
    padding: 8px;
}

.cca-program-link-sports {
  background-color: lightgreen;
  color: white;
  padding: 5%;
  border-radius: 4px;
}

.cca-program-link-social {
  background-color: pink;
  color: white;
  padding: 5%;
  border-radius: 4px;
}

.cca-program-link-fitness {
  background-color: orange;
  color: white;
  padding: 5%;
  border-radius: 4px;
}


button.accordion-button {
    font-size: x-large;
    font-weight: bold;
    padding: 7px;
    border-radius: 5px;
    position: relative;
    padding-right: 45px !important;
    display: flex;
    align-items: center;
    border: 2px solid #044283 !important;
    background-color: #044283 !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

button.accordion-button::after {
    content: "▼";
    font-size: 0.7em;
    font-weight: normal;
    color: #ffffff;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    transition: transform 0.2s ease-in-out;
}

p:has(+ div.collapse.show) button.accordion-button {
    background-color: #ffffff !important;
    color: #044283 !important;
}

p:has(+ div.collapse.show) button.accordion-button::after {
    color: #044283;
    transform: translateY(-50%) rotate(0deg);
}


img.cca-allsportoneday-css {
  max-width: 40%;
  border-radius: 11px;
}

#carouselExampleSlidesOnly{
  border-radius: 11px;
}
div.card {
  border-style: none;
}

.cca-program-td {
    background-image: url('/CCA/images/_CCA_2024/cca_cardio_2025.jpg');
    text-align: center;
    background-repeat: round;
    background-position: center;
    height: 245px;
    width: 100%;
}


        .cell {
            transition: all 0.3s ease;
        }
        .cell:hover:not(.occupied) {
            background-color: #f3f4f6;
            cursor: pointer;
        }
        .winning-cell {
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { background-color: rgba(167, 243, 208, 0.5); }
            50% { background-color: rgba(167, 243, 208, 0.9); }
            100% { background-color: rgba(167, 243, 208, 0.5); }
        }


/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */


select {
  background-color: revert;
}

.jev_catselect, .jev_pagination {
  display: none;
}

img.cca-img-logo {
  width: 50px;
}

a.ev_link_row {
  color: red;
}


header.header {

    background-color: transparent;


}

.container-header {
    display: contents;
}



.metismenu.mod-menu {
    color: #044283;
    display: contents;
    font-weight: bolder;
}

.cca-img-sports-grid {
    border-radius: 40px;
    padding: 1%;
    margin: 1%;
    width: 20%;
    background-color: #9f009e;
    float: left;
 }


.cca-img-programs-grid {
    border-radius: 40px;
    padding: 1%;
    margin: 1%;
    width: 20%;
    background-color: orange;
    float: left;
 }

.cca-img-events-grid {
    border-radius: 10px;
    padding: .25%;
    margin: 1%;
    width: 20%;
    background-color: #044283;
 }

.cca-img-gi-grid {
    border-radius: 40px;
    padding: 1%;
    margin: 1%;
    width: 20%;
    background-color: #044283;
 }



img.cca-gi-logos {
  width: 400px;
  height: auto;
}

div.com-contact__container {
  display: none;
}

div.ccacol {
  text-align: center;

}


#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

p {
  font-family: Roboto, sans-serif;
  font-weight: bold;
}

a {
  text-decoration: none;
}

div.main-top {
  align-items: center;
  border: none;
}

img.card-img-top {
  max-width: 50%;
}

img#x-icon, img#fb-icon,img#ig-icon {
  width: 20%;
  padding-left: 3%;
}

header.header {
    background-image: none;
    background-color: #4169e1;
}

div.container-bottom-b {
  height: 75%;
}

img.cca-main-page-icons {
    border-style: solid;
    padding: 20px;
    border-radius: 45px;
    width: 250px;
}
div.card-body {
  padding: revert;
}

div#mod-custom473.mod-custom .card-body,
div#mod-custom463.mod-custom .card-body {
  padding: 0 !important;
  margin: 0 !important;
}

div.main-bottom.card {
  padding: 0 !important;
  margin: 0 !important;
}


img#citadel-fb-group-img   {
    border-radius: 40px;
    border-style: groove;
}






@media (max-width: 767px) {

  img.cca-allsportoneday-css {
  max-width: 80%;
  border-radius: 6px;
}


.cca-img-sports-grid {
    width: revert-layer;
    max-width: 75%;
    float: none;  
}

.cca-img-programs-grid {
  width: revert-layer;
  max-width: 75%;
  float: none;
}
  
.cca-img-events-grid {
  width: revert-layer;
  max-width: 75%;
}
  
  img.img-cca-banner {
    display: none;
  }

  img.cca-main-page-icons {
      height: 100px;
      width: 100px;

  }  
  p.card-text {
    display: none;
  }
  h5.card-title {
    display: none;
  }

  h3 {
    padding-top: 10%;
  }
  
  img.card-img-top {
    max-width: none;
  }
  

  
  img.card-img-top{
    max-width: none;
    padding: 5%;
    border-radius: 15px;    
    
  }
  img#fb-icon,img#ig-icon, img#x-icon{
    width:30%;
  }
  div.main-top {

  }
  
}
a:link {
  color: var(--link-color);
}
/* ============================================================
   SHARED COMPONENT — .cca-btn-navy
   Sitewide navy CTA button. Add this block ONCE to user.css —
   ideally near the top, in its own "shared components" area,
   separate from any single page's section so it never
   accidentally gets deleted again when a page is rebuilt.

   Used by: Fitness Classes ("Register"), Yoga Class
   ("Register"), and any future page's primary CTA button.

   Forces white text/icon on the :link/:visited/:hover/:focus
   states with !important, since the theme's global link-color
   rule otherwise overrides plain <a> tags styled as buttons.

   Usage:
     <a class="cca-btn-navy" href="...">
       <i class="fa-solid fa-magnifying-glass"></i> Register
     </a>

   NOTE: .cca-join-btn (Membership page) still has its own
   duplicate copy of these same rules — a candidate to retrofit
   to this shared class during the future user.css cleanup pass.
   ============================================================ */
.cca-btn-navy,
.cca-btn-navy:link,
.cca-btn-navy:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cca-navy-900);
  color: #ffffff !important;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid var(--cca-navy-900);
  text-decoration: none;
  transition: background 0.15s ease;
}

.cca-btn-navy:hover,
.cca-btn-navy:focus {
  background: #0B1D3F;
  color: #ffffff !important;
}

.cca-btn-navy i,
.cca-btn-navy i::before {
  color: #ffffff !important;
  font-size: 13px;
}

/* Outer wrapper — sets background, text colour, top padding */
footer.container-footer {
  background: #333333;
  color: #fff;
  padding-top: 56px;
}
 
/* Four-column grid inside the footer */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}
 
/* Column headings — white, bold, uppercase, with underline rule */
.footer-grid h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
 
/* Brand column — logo and description */
.footer-brand .brand {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
}
 
.footer-brand .brand .footer-logo {
  height: 34px;
  width: auto;
  display: block;
  background: #ffffff;
  border-radius: 6px
}
 
.footer-brand p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.6;
  max-width: 32ch;
  margin: 14px 0 0;
}
 
/* Address line in brand column */
.footer-addr {
  margin-top: 18px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
 
/* Navigation link lists */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
.footer-links a {
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}
 
.footer-links a:hover {
  color: rgba(255, 255, 255, 0.7);
}
 
/* Connect column — flex so social icons sit below links */
.footer-connect {
  display: flex;
  flex-direction: column;
}
 
/* Social icon row */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
 
.footer-social .social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s ease;
}
 
.footer-social .social-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}
 
/* Copyright bar */
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 28px 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
 
/* ---- Responsive ---- */
 
/* Two-column layout on tablets */
@media (max-width: 880px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
 
/* Single column on small phones */
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   CITADEL — Stay Connected section
   Paste at the bottom of user.css
   ============================================================ */

.stay-connected {
  background: #DFDFDF;
  padding: 40px 0;
}

.stay-connected .sc-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.stay-connected .sc-text h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  color: #221F1A;
  margin: 0 0 10px;
}

.stay-connected .sc-text p {
  font-size: 15px;
  color: #5C5748;
  margin: 0;
  max-width: 65ch;
  font-weight: normal;
}

.stay-connected .sc-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.stay-connected .sc-social {
  display: flex;
  gap: 10px;
}

.stay-connected .sc-social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #112855;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  transition: background 0.15s ease;
}

.stay-connected .sc-social a:hover {
  background: #044283;
}

.stay-connected .sc-newsletter {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: #112855;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.stay-connected .sc-newsletter:hover {
  background: #044283;
  color: #fff;
}

@media (max-width: 700px) {
  .stay-connected .sc-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
#mod-custom463.mod-custom {
  margin: 0;
  padding: 0;
}
 
#mod-custom463 .card-body {
  padding: 0 !important;
  margin: 0 !important;
}
 
/* Remove the card border/background Joomla adds */
div.main-bottom .card {
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
 
/* Close the gap between Stay Connected and the footer */
div.main-bottom {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
 
footer.container-footer {
  margin-top: 0 !important;
}
/* Pull Stay Connected full width out of the site-grid container */
#mod-custom463 .stay-connected {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}
/* ============================================================
   CITADEL — Get Involved section
   Paste at the bottom of user.css
   ============================================================ */

.get-involved {
  background: #112855;
  color: #fff;
  padding: 56px 0;
}

.get-involved .gi-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.get-involved .gi-header {
  margin-bottom: 36px;
}

.get-involved .gi-header h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}

.get-involved .gi-header p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  font-weight: normal;
  max-width: 60ch;
}

.get-involved .gi-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.get-involved .gi-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.get-involved .gi-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #D52A27;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.get-involved .gi-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.get-involved .gi-card p {
  font-size: 14.5px;
  color: rgba(197, 210, 227, 1);
  margin: 0;
  line-height: 1.55;
  flex: 1;
  font-weight: normal;
}

.get-involved .gi-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 999px;
  background: #D52A27;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s ease;
  margin-top: 4px;
}

.get-involved .gi-btn:hover {
  background: #B5211E;
  color: #fff;
}

/* Full-width breakout — same technique as Stay Connected */
#mod-custom473 .card-body {
  padding: 0 !important;
  margin: 0 !important;
}

#mod-custom473.mod-custom {
  margin: 0;
  padding: 0;
}

#mod-custom473 .get-involved {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/* Responsive */
@media (max-width: 768px) {
  .get-involved .gi-cards {
    grid-template-columns: 1fr;
  }
}
/* Remove gap between Get Involved and Stay Connected */
#mod-custom473 {
  margin: 0;
  padding: 0;
}

#mod-custom473 .card-body {
  padding: 0 !important;
  margin: 0 !important;
}

div.main-bottom .card {
  margin-bottom: 0 !important;
}
/* Remove grid gap between homepage modules */
.site-grid {
  grid-gap: 0 !important;
  gap: 0 !important;
}
/* ============================================================
   CITADEL — Hero / Banner section
   Paste at the bottom of user.css
   ============================================================ */

/* Full-width breakout for the leading article (hero) */
.blog-featured .items-leading {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  max-width: 100vw;
  overflow: visible;
}

/* Strip default article wrapper padding/margin */
.blog-featured .items-leading .blog-item,
.blog-featured .items-leading .item-content,
.blog-featured .items-leading p {
  margin: 0 !important;
  padding: 0 !important;
}

.blog-featured .items-leading .blog-item,
.blog-featured .items-leading .item-content {
  overflow: visible;
}

/* Hero outer wrapper */
.hero-wrap {
  position: relative;
  background: #112855;
  overflow: visible;
  width: 100%;
}

/* Image container */
.hero-img-wrap {
  position: relative;
  height: min(45vh, 420px);
  min-height: 280px;
  overflow: hidden;
}

.hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 0 !important;
  padding: 0 !important;
  background: none !important;
}

/* Gradient overlay — fades to white at the bottom */
.hero-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 40, 85, 0) 0%,
    rgba(17, 40, 85, 0.15) 55%,
    #ffffff 100%
  );
}

/* Card positioning — pulls up over the gradient */
.hero-content {
  max-width: 1200px;
  margin: -80px auto 0;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

/* White welcome card */
.hero-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px -12px rgba(17, 40, 85, 0.25);
  padding: 24px 32px;
  max-width: 680px;
  border: 1px solid #E4DCC9;
}

.hero-card .hero-eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #112855;
  margin-bottom: 10px;
  font-family: monospace;
}

.hero-card h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  color: #112855;
  margin: 0 0 14px;
  line-height: 1.1;
}

.hero-card .hero-intro {
  color: #5C5748;
  font-size: 16.5px;
  margin: 0 0 32px !important;
  max-width: 54ch;
  font-weight: normal;
  line-height: 1.5;
}

.hero-card p.hero-intro {
  margin-bottom: 32px !important;
  padding-bottom: 0 !important;
}

/* CTA buttons */
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: #D52A27;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
  border: 1px solid transparent;
}

.hero-btn-primary:hover {
  background: #B5211E;
  color: #fff;
}

.hero-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: transparent;
  color: #112855;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #112855;
  transition: all 0.15s ease;
}

.hero-btn-outline:hover {
  background: #112855;
  color: #fff;
}
a.hero-btn-primary,
a.hero-btn-primary:link,
a.hero-btn-primary:visited,
a.hero-btn-primary:hover {
  color: #fff !important;
}

a.hero-btn-outline,
a.hero-btn-outline:link,
a.hero-btn-outline:visited {
  color: #112855 !important;
}

a.hero-btn-outline:hover {
  color: #fff !important;
}
/* Spacer below card before next section */
.hero-spacer {
  height: 48px;
  background: #112855;
  width: 100%;
}

/* Mobile */
@media (max-width: 768px) {
  .hero-content {
    margin-top: -60px;
    padding: 0 16px;
  }
  .hero-card {
    padding: 28px 24px;
  }
}
/* ============================================================
   CITADEL — DPCalendar Events Listing Page
   ============================================================ */

/* ── Hide unwanted UI elements ── */
.com-dpcalendar-list__actions,
.dp-filter,
.dp-locations {
  display: none !important;
}

/* ── Page wrapper ── */
.com-dpcalendar-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

/* ── Intro text — red rule pattern ── */
.com-dpcalendar-list__custom-text {
  border-left: 3px solid #D52A27;
  padding-left: 18px;
  margin-bottom: 2rem;
  color: #5C5748;
  font-size: 15px;
  line-height: 1.75;
  font-weight: normal;
}

.com-dpcalendar-list__custom-text:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ── Events grid ── */
.com-dpcalendar-list__events {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}

.com-dpcalendar-list__events ul.dp-events.dp-list-unordered {
  display: contents !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Card reset — override DPCalendar list styles ── */
.com-dpcalendar-list__events ul.dp-events li.dp-event {
  background: #ffffff !important;
  border: 0.5px solid #E4DCC9 !important;
  border-top: 0.5px solid #E4DCC9 !important;
  border-bottom: 0.5px solid #E4DCC9 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.com-dpcalendar-list__events ul.dp-events li.dp-event:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px -12px rgba(17,40,85,0.18) !important;
}

/* Override DPCalendar zebra striping */
.com-dpcalendar-list .dp-list li:nth-of-type(odd) {
  background-color: #ffffff !important;
}
.com-dpcalendar-list .dp-list li:first-child {
  border-top: 0.5px solid #E4DCC9 !important;
}
.com-dpcalendar-list .dp-list > li {
  border-bottom: 0.5px solid #E4DCC9 !important;
}

/* ── Event image ── */
.com-dpcalendar-list__events ul.dp-events li.dp-event .dp-event__image {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #ede8df !important;
  width: 100% !important;
  display: block !important;
}

.com-dpcalendar-list__events ul.dp-events li.dp-event .dp-event__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

.com-dpcalendar-list__events ul.dp-events li.dp-event:hover .dp-event__image img {
  transform: scale(1.05) !important;
}

/* ── Event title ── */
.com-dpcalendar-list__events ul.dp-events li.dp-event h2.dp-event__title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #221F1A !important;
  line-height: 1.3 !important;
  padding: 14px 16px 0 !important;
  margin: 0 !important;
}

.com-dpcalendar-list__events ul.dp-events li.dp-event h2.dp-event__title a {
  color: #221F1A !important;
  text-decoration: none !important;
}

.com-dpcalendar-list__events ul.dp-events li.dp-event h2.dp-event__title a:hover {
  color: #044283 !important;
}

/* ── Date/time row ── */
.com-dpcalendar-list__events ul.dp-events li.dp-event .dp-event__details {
  padding: 6px 16px 0 !important;
  font-size: 12px !important;
  color: #5C5748 !important;
  font-weight: normal !important;
}

/* ── Hide calendar name and hits ── */
.com-dpcalendar-list__events ul.dp-events li.dp-event .dp-event__calendar,
.com-dpcalendar-list__events ul.dp-events li.dp-event .dp-event__hits {
  display: none !important;
}

/* ── Description ── */
.com-dpcalendar-list__events ul.dp-events li.dp-event .dp-event__description {
  padding: 8px 16px 14px !important;
  font-size: 13px !important;
  color: #5C5748 !important;
  line-height: 1.55 !important;
  flex: 1 !important;
  font-weight: normal !important;
}

/* ── Read more link ── */
.com-dpcalendar-list__events ul.dp-events li.dp-event .dp-event__readmore a,
.com-dpcalendar-list__events ul.dp-events li.dp-event a.dp-event-readmore {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #044283 !important;
  text-decoration: none !important;
  padding: 0 16px 16px !important;
}

.com-dpcalendar-list__events ul.dp-events li.dp-event .dp-event__readmore a:hover {
  color: #224FAA !important;
}

/* ── Schema.org wrapper — no extra padding ── */
.com-dpcalendar-list__events ul.dp-events li.dp-event div[itemtype] {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .com-dpcalendar-list__events ul.dp-events.dp-list-unordered {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 580px) {
  .com-dpcalendar-list__events ul.dp-events.dp-list-unordered {
    grid-template-columns: 1fr !important;
  }
}

/* Hide navigation bar */
.dp-button-bar__navigation {
  display: none !important;
}
/* ============================================================
   CITADEL — Board of Directors page
   Add this entire block to the bottom of user.css
   ============================================================ */

/* Google Fonts — Fraunces, Inter, IBM Plex Mono */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ── Design tokens ── */
:root {
  --cca-navy-900: #112855;
  --cca-navy-800: #0B1D3F;
  --cca-navy-700: #044283;
  --cca-navy-600: #224FAA;
  --cca-red-500:  #D52A27;
  --cca-ink-900:  #221F1A;
  --cca-ink-600:  #5C5748;
  --cca-line:     #E4DCC9;
}

/* ── Page wrapper ── */
.cca-board {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--cca-ink-900);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.cca-board h1,
.cca-board h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
}

/* ── Page header — navy band ── */
.board-header {
  background: var(--cca-navy-900);
  padding: 52px 40px 40px;
}

.board-header .eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  display: block;
  margin-bottom: 10px;
}

.board-header h1 {
  font-size: clamp(26px, 4vw, 38px);
  color: #fff;
  margin: 0;
}

/* ── Intro — two column text band ── */
.board-intro {
  padding: 48px 40px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  border-bottom: 1px solid var(--cca-line);
}

.board-intro h2 {
  font-size: 19px;
  color: var(--cca-navy-900);
  margin-bottom: 14px;
}

.board-intro p {
  font-size: 14px;
  color: var(--cca-ink-600);
  line-height: 1.65;
  margin-bottom: 10px;
  font-weight: normal;
}

.board-intro p:last-child {
  margin-bottom: 0;
}

/* Inline email links inside paragraphs */
.cca-board .email-link {
  color: var(--cca-navy-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s ease;
  font-weight: normal;
}

.cca-board .email-link:hover {
  color: var(--cca-navy-600);
}

/* ── Board sections wrapper ── */
.board-sections {
  padding: 0 40px 52px;
}

.board-section {
  padding-top: 40px;
}

.board-section + .board-section {
  border-top: 1px solid var(--cca-line);
  margin-top: 40px;
}

/* Section label — IBM Plex Mono uppercase */
.board-section .section-label,
.board-lower .section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cca-navy-600);
  display: block;
  margin-bottom: 18px;
}

/* ── Card grids ── */
.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.open-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.lower-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.contractor-grid {
  display: grid;
  gap: 12px;
}

/* ── Member card — base ── */
.mcard {
  background: #fff;
  border: 1px solid var(--cca-line);
  border-radius: 10px;
  padding: 14px 36px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.mcard-role {
  font-size: 11.5px;
  color: var(--cca-ink-600);
  line-height: 1.4;
  font-weight: normal;
}

.mcard-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cca-navy-700);
  transition: color 0.15s ease;
}

.mcard-name.monitored {
  font-weight: 500;
  font-style: italic;
  color: var(--cca-ink-600);
}

/* ── Mail icon — revealed on hover ── */
.mail-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0;
  color: var(--cca-navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

/* ── Clickable card — hover & active states ── */
.mcard.clickable {
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.mcard.clickable:hover {
  box-shadow:
    0 8px 24px -6px rgba(17, 40, 85, 0.18),
    0 2px 6px  -2px rgba(17, 40, 85, 0.10);
  transform: translateY(-2px);
  border-color: #B8C8E0;
}

.mcard.clickable:hover .mcard-name { color: var(--cca-navy-600); }
.mcard.clickable:hover .mail-icon  { opacity: 1; }

.mcard.clickable:active {
  transform: translateY(0);
  box-shadow: none;
}

.mcard.clickable:focus-visible {
  outline: 3px solid var(--cca-red-500);
  outline-offset: 2px;
}

/* ── Open position card ── */
.mcard.open-card {
  background: #FAFAFA;
  border-color: #EDE8DF;
  cursor: default;
  padding-right: 16px;
}

.open-badge {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #FEF2F2;
  color: var(--cca-red-500);
  border: 1px solid #FECACA;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 2px;
  width: fit-content;
}

/* ── All-filled state ── */
.all-filled {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px;
  background: #F4FAF0;
  border: 1px solid #C6E6B3;
  border-radius: 10px;
}

.all-filled svg {
  flex-shrink: 0;
  color: #3B6D11;
  margin-top: 1px;
}

.all-filled p {
  font-size: 14px;
  color: #3B6D11;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}

/* ── Lower band — Other Roles & Contractor ── */
.board-lower {
  border-top: 1px solid var(--cca-line);
  padding: 40px 40px 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .board-intro        { grid-template-columns: 1fr; gap: 32px; }
  .member-grid        { grid-template-columns: repeat(3, 1fr); }
  .board-lower        { grid-template-columns: 1fr; gap: 0; }
  .board-lower > div + div {
    border-top: 1px solid var(--cca-line);
    padding-top: 36px;
    margin-top: 36px;
  }
}

@media (max-width: 600px) {
  .board-header       { padding: 40px 20px 32px; }
  .board-intro        { padding: 32px 20px; }
  .board-sections     { padding: 0 20px 40px; }
  .board-lower        { padding: 32px 20px 40px; }
  .member-grid        { grid-template-columns: repeat(2, 1fr); }
  .open-grid          { grid-template-columns: repeat(2, 1fr); }
  .lower-grid         { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .member-grid        { grid-template-columns: 1fr; }
  .open-grid          { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mcard.clickable,
  .mail-icon,
  .mcard-name,
  .cca-board .email-link { transition: none !important; }
}
/* =============================================================
   CITADEL COMMUNITY GARDEN — user.css additions
   Works for both the registration-open and registration-closed
   articles. Add these rules to your existing user.css file.
   ============================================================= */

/* --- Page banner (navy header — shared with Board of Directors) --- */
.cca-page-banner {
  background: #112855;
  padding: 28px 36px 36px;
  border-radius: 0;
  margin-bottom: 0;
}

.cca-page-banner .cca-eyebrow {
  display: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}

.cca-page-banner h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 10px;
}

.cca-page-banner .cca-banner-lead {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.70);
  max-width: 58ch;
  line-height: 1.65;
  margin: 0;
}

/* --- Garden image placeholder / actual image --- */
.cca-garden-img {
  display: block;
  width: 100%;
  border-radius: 14px;
  margin: 28px 0;
  border: 1px solid #E4DCC9;
  /* When a real image is used, set the src on the <img> tag.
     The aspect ratio below keeps the space consistent. */
  aspect-ratio: 16 / 6;
  object-fit: cover;
}

/* --- Cards row — what you get + season dates side by side --- */
.cca-cards-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 0;
}

.cca-cards-row .cca-what-card,
.cca-cards-row .cca-season-card {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 28px;
}

@media (max-width: 620px) {
  .cca-cards-row {
    flex-direction: column;
  }
}

/* --- What you get card --- */
.cca-what-card {
  background: #DFDFDF;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 20px;
}

.cca-what-card h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #112855;
  margin-bottom: 14px;
}

.cca-what-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cca-what-card ul li {
  font-size: 14px;
  color: #5C5748;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  line-height: 1.5;
}

.cca-what-card ul li i {
  color: #3B6D11;
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}

.cca-what-card ul li a {
  color: #044283;
  font-weight: 500;
}

/* --- Season dates card --- */
.cca-season-card {
  background: #112855;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 28px;
}

.cca-season-card h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
}

.cca-season-row {
  display: flex;
  gap: 12px;
  margin-bottom: 11px;
  align-items: flex-start;
}

.cca-season-month {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  padding: 3px 9px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 58px;
  text-align: center;
}

.cca-season-text {
  font-size: 13.5px;
  color: #C5D2E3;
  line-height: 1.5;
}

.cca-season-note {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 10px;
  font-style: italic;
}

/* --- Section heading (How it works) --- */
.cca-section-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #112855;
  margin-bottom: 18px;
}

/* --- How it works — rules grid --- */
.cca-rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 560px) {
  .cca-rules-grid {
    grid-template-columns: 1fr;
  }
}

.cca-rule-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.cca-rule-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #EAF3DE;
  color: #3B6D11;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cca-rule-icon i {
  font-size: 15px;
}

.cca-rule-label {
  font-size: 13.5px;
  color: #221F1A;
  font-weight: 600;
  margin-bottom: 2px;
}

.cca-rule-desc {
  font-size: 13px;
  color: #5C5748;
  line-height: 1.5;
  margin: 0;
}

/* --- Organic / policy note --- */
.cca-organic-note {
  background: #EAF3DE;
  border-left: 3px solid #3B6D11;
  border-radius: 0 9px 9px 0;
  padding: 12px 16px;
  margin-bottom: 28px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cca-organic-note i {
  color: #3B6D11;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cca-organic-note p {
  font-size: 13.5px;
  color: #27500A;
  line-height: 1.55;
  margin: 0;
}

/* --- Divider --- */
.cca-divider {
  border: none;
  border-top: 1px solid #E4DCC9;
  margin: 28px 0;
}

/* --- Registration closed banner --- */
.cca-closed-banner {
  background: #DFDFDF;
  border-radius: 14px;
  border: 1px solid #E4DCC9;
  padding: 26px 28px;
  margin-bottom: 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.cca-closed-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #112855;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cca-closed-icon i {
  font-size: 20px;
  color: #ffffff;
}

.cca-closed-text h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #112855;
  margin-bottom: 6px;
}

.cca-closed-text p {
  font-size: 14px;
  color: #5C5748;
  line-height: 1.65;
  max-width: 52ch;
  margin-bottom: 0;
}

.cca-check-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #112855;
  background: #ffffff;
  border: 1px solid #112855;
  border-radius: 999px;
  padding: 7px 16px;
}

.cca-check-back i {
  font-size: 13px;
}

/* --- Registration open — placeholder block --- */
.cca-reg-open {
  background: #DFDFDF;
  border-radius: 14px;
  border: 1px solid #E4DCC9;
  padding: 26px 28px;
  margin-bottom: 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.cca-reg-open-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #112855;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cca-reg-open-icon i {
  font-size: 20px;
  color: #ffffff;
}

.cca-reg-open-text h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #112855;
  margin-bottom: 6px;
}

.cca-reg-open-text p {
  font-size: 14px;
  color: #5C5748;
  line-height: 1.65;
  margin-bottom: 0;
}

/* --- Contact section --- */
.cca-contact {
  margin-top: 4px;
}

.cca-contact-intro {
  font-size: 14px;
  color: #5C5748;
  margin-bottom: 4px;
}

.cca-contact-names {
  font-size: 14px;
  font-weight: 600;
  color: #221F1A;
  margin-bottom: 6px;
}

.cca-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: #044283;
  text-decoration: none;
}

.cca-contact-link:hover {
  color: #224FAA;
}

.cca-contact-link i {
  font-size: 13px;
}

/* --- Mobile adjustments --- */
@media (max-width: 640px) {
  .cca-page-banner {
    padding: 18px 20px 24px;
  }
}

@media (max-width: 560px) {
  .cca-closed-banner,
  .cca-reg-open {
    flex-direction: column;
  }
}
/* ============================================================
   CITADEL — Get Involved page styles
   Add this block to user.css.

   .cca-page-banner already exists in user.css from the Community
   Garden build — it is NOT redeclared here. Only the new
   .cca-involve-* rules for the card grid are added below.
   ============================================================ */

.cca-involve-section{padding:56px 0 88px;}

.cca-involve-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:26px;
  max-width:1200px;
  margin:0 auto;
  padding:0 28px;
}

.cca-involve-card{
  position:relative;
  background:#ffffff;
  border:1px solid #E4DCC9;
  border-radius:14px;
  padding:30px 28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:0 1px 2px rgba(34,31,26,.04);
  transition:transform .18s ease, box-shadow .18s ease;
}

.cca-involve-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px -12px rgba(17,40,85,0.25);
}

.cca-involve-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  background:#112855;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:19px;
}

.cca-involve-card h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:19px;
  color:#221F1A;
  margin:0;
}

.cca-involve-card p{
  margin:0;
  color:#5C5748;
  font-size:14.5px;
  line-height:1.6;
  flex:1;
  font-weight:normal;
}

.cca-involve-link{
  margin-top:4px;
  font-weight:600;
  font-size:14px;
  color:#044283;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.cca-involve-link i{
  font-size:12px;
  transition:transform .15s ease;
}

.cca-involve-card:hover .cca-involve-link i{
  transform:translateX(3px);
}

.cca-involve-anchor{
  position:absolute;
  inset:0;
  border-radius:14px;
}

@media (max-width:640px){
  .cca-involve-section{padding:40px 0 56px;}
  .cca-involve-card{padding:26px 22px;}
}

/* ============================================================
   CITADEL — Programs page
   Add this block to the bottom of user.css.

   This page reuses .cca-page-banner (from the Board of Directors /
   Community Garden block) and .cca-involve-section / .cca-involve-grid /
   .cca-involve-card / .cca-involve-icon / .cca-involve-link /
   .cca-involve-anchor (from the Get Involved block) unchanged —
   neither is redeclared here.

   Only the rules below are new:
     - .cca-programs-section / .cca-programs-title  (category headings)
     - .cca-involve-card.is-upcoming + .cca-coming-soon-chip
       (the "coming soon" card state, e.g. Book Club)
   ============================================================ */

/* Section wrapper — gives each category (Fitness & Sports, Social)
   the same 1200px/28px gutters as .cca-involve-grid, and controls
   the vertical rhythm between repeated category blocks. */
.cca-programs-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.cca-programs-section + .cca-programs-section {
  margin-top: 8px;
}

/* Category title — Fraunces heading with a short navy rule
   underneath (var(--cca-navy-900)), not the red accent, since
   this is a structural label rather than a call to action. */
.cca-programs-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--cca-navy-900);
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--cca-navy-900);
  display: inline-block;
}

/* Coming-soon card state — same .cca-involve-card shape, dashed
   border and muted icon so it reads as "not yet active" rather
   than broken or missing content. Used on cards with no link
   (e.g. Book Club). */
.cca-involve-card.is-upcoming {
  background: #FAF8F3;
  border-style: dashed;
}

.cca-involve-card.is-upcoming .cca-involve-icon {
  background: rgba(17, 40, 85, .35);
}

.cca-involve-card.is-upcoming h3 {
  color: var(--cca-ink-600);
}

.cca-coming-soon-chip {
  align-self: flex-start;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cca-navy-700);
  background: rgba(17, 40, 85, .08);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .cca-programs-title {
    margin-bottom: 22px;
  }
}
/* =========================================================
   Book Club article page — add to user.css
   =========================================================

   The banner uses the site's existing .cca-page-banner /
   .cca-eyebrow / .cca-banner-lead classes (already in user.css
   from the Board of Directors / Community Garden / Programs
   pages) — nothing new is declared for it here, so the spacing
   matches those pages exactly.

   The --cca-navy-900 / --cca-navy-700 / --cca-ink-900 /
   --cca-ink-600 / --cca-line variables are also already declared
   in user.css (Board of Directors block) — reused below, not
   redeclared.

   Only the article-body rules below are new, all prefixed
   .cca-bookclub- so they can't collide with anything else on
   the site.
   ========================================================= */

.cca-bookclub-section{
  max-width:1200px;margin:0 auto;padding:40px 28px 80px;
}
.cca-bookclub-grid{
  display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start;
}
.cca-bookclub-poster{
  border-radius:14px;overflow:hidden;
  box-shadow:0 10px 30px -12px rgba(17,40,85,0.25);
  border:1px solid var(--cca-line);
}
.cca-bookclub-meta{
  margin-top:20px;background:#fff;border:1px solid var(--cca-line);border-radius:14px;
  padding:20px 22px;display:flex;flex-direction:column;gap:12px;
}
.cca-bookclub-meta-row{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--cca-ink-900);font-weight:normal;}
.cca-bookclub-meta-row i.fa-solid{
  flex-shrink:0;margin-top:2px;color:var(--cca-navy-700);font-size:15px;width:18px;text-align:center;
}
.cca-bookclub-meta-row b{font-weight:600;}
.cca-bookclub-meta-row .cca-contact-link{font-weight:600;color:var(--cca-navy-700);text-decoration:none;}
.cca-bookclub-meta-row .cca-contact-link:hover{color:#224FAA;}
.cca-bookclub-cost{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.02em;background:rgba(17,40,85,.08);color:var(--cca-navy-700);
  padding:6px 12px;border-radius:999px;width:fit-content;
}

/* Divider reuses .cca-divider as-is, just trimmed to fit the compact card */
.cca-bookclub-meta .cca-divider{margin:2px 0;}

/* Small mono-uppercase label above the write-up heading, same pattern
   as .cca-eyebrow elsewhere on the site */
.cca-bookclub-subeyebrow{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--cca-navy-700);margin-bottom:10px;
}

.cca-bookclub-body h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:24px;color:var(--cca-navy-900);margin-bottom:14px;}
.cca-bookclub-body p{margin:0 0 18px;color:var(--cca-ink-600);font-size:16px;max-width:62ch;font-weight:normal;}
.cca-bookclub-body p:last-child{margin-bottom:0;}
.cca-bookclub-body strong{color:var(--cca-ink-900);}
.cca-bookclub-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px;}
.cca-bookclub-list li{font-size:15.5px;color:var(--cca-ink-900);padding-left:18px;position:relative;font-weight:normal;}
.cca-bookclub-list li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--cca-navy-700);
}

@media (max-width:820px){
  .cca-bookclub-grid{grid-template-columns:1fr;}
}

/* =========================================================
   NEW — "Coming Up" section
   Sits below the two-column grid, full width. Reuses
   .cca-bookclub-subeyebrow for the section label so the
   typography matches "This month's read" above it.
   ========================================================= */

.cca-bookclub-upcoming{
  margin-top:36px;padding-top:28px;border-top:1px solid var(--cca-line);
}
.cca-bookclub-upcoming-list{
  display:flex;flex-direction:column;gap:16px;margin-top:18px;
}
.cca-bookclub-upcoming-row{
  display:flex;gap:16px;align-items:flex-start;
}
.cca-bookclub-upcoming-month{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cca-navy-700);background:rgba(17,40,85,.08);
  padding:6px 10px;border-radius:6px;flex-shrink:0;min-width:52px;text-align:center;
}
.cca-bookclub-upcoming-title{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:16px;color:var(--cca-ink-900);margin:0 0 2px;
}
.cca-bookclub-upcoming-date{
  font-size:13.5px;color:var(--cca-ink-600);margin:0;font-weight:normal;
}

/* Schedule-change flag — same visual pattern as .open-badge on the
   Board of Directors page (light red pill, small uppercase text)
   used here to call out a meeting that's off its usual day/date. */
.cca-bookclub-flag{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;background:#FEF2F2;color:var(--cca-red-500);
  border:1px solid #FECACA;padding:2px 8px;border-radius:20px;margin-left:2px;position:relative;top:-1px;
}
/* ============================================================
   CITADEL — Badminton page
   Add this entire block to the bottom of user.css.

   Reuses .cca-page-banner / .cca-eyebrow / .cca-banner-lead
   (already in user.css from the Board of Directors / Community
   Garden / Programs pages) and .cca-contact-link (already in
   user.css from the Community Garden / Book Club pages) —
   neither is redeclared here.

   The --cca-navy-900 / --cca-navy-700 / --cca-ink-900 /
   --cca-ink-600 / --cca-line CSS variables are also already
   declared in user.css (Board of Directors block) — reused
   below, not redeclared.
   ============================================================ */

.cca-badminton-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 28px 56px;
}

/* --- Membership strip --- */
.cca-badminton-membership {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #DFDFDF;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 28px;
}

.cca-badminton-membership-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--cca-navy-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.cca-badminton-membership p {
  margin: 0;
  font-size: 14.5px;
  color: var(--cca-ink-600);
  font-weight: normal;
}

.cca-badminton-membership p a {
  color: var(--cca-navy-700);
  font-weight: 600;
}

/* --- Section label (reused pattern from Board / Programs pages) --- */
.cca-badminton-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cca-navy-600);
  margin-bottom: 14px;
}

/* --- Location cards --- */
.cca-badminton-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.cca-badminton-card {
  border: 1px solid var(--cca-line);
  border-radius: 14px;
  overflow: hidden;
}

.cca-badminton-card-head {
  padding: 14px 18px;
  background: var(--cca-navy-900);
}

.cca-badminton-card-name {
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
}

.cca-badminton-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.cca-badminton-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--cca-ink-900);
  font-weight: normal;
}

.cca-badminton-row i {
  width: 16px;
  color: var(--cca-navy-700);
  text-align: center;
}

.cca-badminton-row--addr {
  text-decoration: none;
}

.cca-badminton-row--addr:hover {
  color: var(--cca-navy-700);
}

.cca-badminton-divider {
  border-top: 1px solid var(--cca-line);
  margin: 2px 0 4px;
}

.cca-badminton-row--date {
  align-items: flex-start;
}

.cca-badminton-row--date i {
  margin-top: 2px;
}

.cca-badminton-date {
  font-style: italic;
  color: var(--cca-ink-600);
}

.cca-badminton-date--confirmed {
  font-style: normal;
  font-weight: 500;
  color: var(--cca-ink-900);
}

/* --- Notice callout --- */
.cca-badminton-notice {
  background: #EAF3DE;
  border-left: 3px solid #3B6D11;
  border-radius: 0 9px 9px 0;
  padding: 14px 18px;
  margin-bottom: 28px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.cca-badminton-notice i {
  color: #3B6D11;
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}

.cca-badminton-notice div {
  font-size: 13.5px;
  color: #27500A;
  line-height: 1.6;
  font-weight: normal;
}

/* --- Contact --- */
.cca-badminton-contact {
  border-top: 1px solid var(--cca-line);
  padding-top: 22px;
}

.cca-badminton-contact p {
  font-size: 14px;
  color: var(--cca-ink-600);
  margin-bottom: 6px;
  font-weight: normal;
}

/* --- Responsive --- */
@media (max-width: 620px) {
  .cca-badminton-locations {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   CITADEL — Memberships page  (v2)
   Append this entire block to the bottom of user.css.

   Path: System → Site Templates → Cassiopeia Details and Files
         → css → user.css

   NOTES:
   - .cca-page-banner, .cca-eyebrow, .cca-banner-lead, and
     .cca-divider are already in user.css — not redeclared here.
   - CSS variables (--cca-navy-900 etc.) already declared in
     user.css via the Board of Directors block — reused, not
     redeclared.
   - Font Awesome 6 must be loaded in the template <head>:
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
   ============================================================ */


/* ── Page body wrapper ── */
.cca-membership-body {
  padding: 36px 36px 56px;
}


/* ── Section label — same pattern as .cca-badminton-label ── */
.cca-membership-body .section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cca-navy-600);
  display: block;
  margin-bottom: 14px;
}


/* ── Benefits grid ── */
.membership-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.membership-benefit-card {
  background: #ffffff;
  border: 1px solid var(--cca-line);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.membership-benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--cca-navy-900);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* Override the site-wide bold <p> rule inside benefit cards */
.membership-benefit-card p {
  font-size: 13.5px;
  color: var(--cca-ink-600);
  line-height: 1.55;
  font-weight: normal;
  margin: 0;
}

.membership-benefit-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--cca-ink-900);
  margin: 0;
}


/* ── Membership finder ── */
.cca-finder {
  background: #DFDFDF;
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 18px;
}

.cca-finder h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--cca-navy-900);
  margin-bottom: 6px;
}

/* Override site-wide bold <p> */
.cca-finder p {
  font-size: 14px;
  color: var(--cca-ink-600);
  line-height: 1.6;
  font-weight: normal;
  margin-bottom: 18px;
}

.finder-step + .finder-step {
  margin-top: 16px;
}

.finder-q-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cca-navy-700);
  display: block;
  margin-bottom: 10px;
}

.finder-q-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Finder buttons ──
   Important: reset ALL inherited button/p styles from the
   site-wide template to prevent height inflation. ── */
.finder-q-btn {
  /* Reset */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  line-height: 1.4;
  /* Layout */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  /* Visual */
  border-radius: 999px;
  border: 2px solid var(--cca-navy-900);
  background: #ffffff;
  color: var(--cca-navy-900);
  /* Typography — override site-wide bold */
  font-family: 'Inter', 'Gill Sans Nova', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500 !important;
  /* Behaviour */
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.finder-q-btn .finder-btn-check {
  display: none;
  font-size: 12px;
}

.finder-q-btn:hover {
  background: #E8EDF5;
}

/* Selected state */
.finder-q-btn.active {
  background: var(--cca-navy-900) !important;
  color: #ffffff !important;
  border-color: var(--cca-navy-900) !important;
  font-weight: 500 !important;
}

.finder-q-btn.active .finder-btn-check {
  display: inline;
}

/* ── Result panel ── */
.finder-result {
  margin-top: 18px;
  background: #ffffff;
  border: 1px solid var(--cca-line);
  border-radius: 10px;
  padding: 16px 18px;
  /* shown via JS: style.display = 'flex' */
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.finder-result-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--cca-navy-900);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.finder-result-body {
  flex: 1;
  min-width: 160px;
}

.finder-result-body h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--cca-navy-900);
  margin-bottom: 2px;
}

/* Override site-wide bold <p> */
.finder-result-body p {
  font-size: 13px;
  color: var(--cca-ink-600);
  font-weight: normal;
  margin: 0;
}

.finder-result-price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--cca-navy-900);
  white-space: nowrap;
}

.cca-join-btn,
.cca-join-btn:link,
.cca-join-btn:visited,
.cca-join-btn:hover,
.cca-join-btn:active {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff !important;
  background: var(--cca-navy-700);
  border-radius: 999px;
  padding: 8px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.cca-join-btn:hover,
.cca-join-btn:active {
  background: var(--cca-navy-900);
}


/* ── Post-finder note ── */
.membership-note {
  font-size: 12.5px;
  color: var(--cca-ink-600);
  font-weight: normal !important;
  margin-bottom: 28px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.membership-note i {
  font-size: 11px;
  margin-top: 2px;
  flex-shrink: 0;
}


/* ── Renewal card ── */
.cca-renewal-card {
  background: var(--cca-navy-900);
  border-radius: 14px;
  padding: 26px 28px;
}

.cca-renewal-card h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

/* Override site-wide bold <p> */
.cca-renewal-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  font-weight: normal;
  margin: 0;
}

.cca-renewal-card > p {
  margin-bottom: 20px;
}

.renewal-steps {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.renewal-step {
  flex: 1;
  min-width: 150px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.renewal-step-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

.renewal-step-text h4 {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}

.renewal-step-text p {
  font-size: 13px;
  color: rgba(197, 210, 227, 1);
  line-height: 1.4;
}

.cca-renewal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: var(--cca-navy-900);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.cca-renewal-btn:hover {
  background: #E4DCC9;
  color: var(--cca-navy-900);
}


/* ── Responsive ── */
@media (max-width: 768px) {
  .cca-membership-body {
    padding: 28px 20px 40px;
  }

  .membership-benefits-grid {
    grid-template-columns: 1fr 1fr;
  }

  .finder-result {
    flex-direction: column;
    align-items: flex-start;
  }

  .renewal-steps {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .membership-benefits-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   CITADEL — Volunteers page
   Append this block to the bottom of user.css.

   This page reuses, unchanged, the following blocks already in
   user.css — none of them are redeclared here:
     - .cca-page-banner / .cca-eyebrow / .cca-banner-lead
       (from Board of Directors / Community Garden build)
     - .open-grid / .mcard / .mcard.open-card / .mcard-name /
       .open-badge (from Board of Directors build)
     - .cca-involve-grid / .cca-involve-card / .cca-involve-icon /
       .cca-involve-anchor (from Get Involved / Programs build)
     - CSS variables --cca-navy-900 etc. (from Board of Directors
       build)

   Font Awesome 6 must be loaded in the template <head> for the
   .cca-involve-icon <i> glyphs used on this page:
     <link rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

   Only the rules below are new, and are page-scoped with the
   .cca-volunteer-* prefix so they can't collide with any other
   page's classes.

   NOTE: Form colors (Convert Forms embed, form ID 2) are NOT
   styled here. Set those directly in Convert Forms' own
   Edit Form > Design tab — see the notes shared with the client
   for the specific values to use there.
   ============================================================ */

/* Override: force this page's "Lend a hand" grid to a fixed 2x2,
   overriding the shared .cca-involve-grid's auto-fit default */
.cca-volunteer-sections .cca-involve-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Override: give the board open-position cards the same
   clickable hover + anchor-link behavior as .cca-involve-card,
   scoped to THIS page only. The shared .mcard.open-card rule
   (used as-is on the Board of Directors page, where cards have
   nowhere to link to) is left untouched. */
.cca-volunteer-sections .mcard.open-card {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cca-volunteer-sections .mcard.open-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px -12px rgba(17, 40, 85, 0.25);
  border-color: #B8C8E0;
}

/* ── Section wrapper ── */
.cca-volunteer-sections { padding: 0 40px; }
.cca-volunteer-section { padding-top: 44px; }
.cca-volunteer-section + .cca-volunteer-section {
  border-top: 1px solid var(--cca-line);
  margin-top: 44px;
}
.cca-volunteer-section:last-child { padding-bottom: 52px; }

/* Page-scoped label — same visual pattern as .section-label /
   .cca-badminton-label, declared separately because the real
   .section-label rule is scoped to .board-section and won't
   apply here. */
.cca-volunteer-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cca-navy-600);
  display: block;
  margin-bottom: 14px;
}

.cca-volunteer-section h2 {
  font-size: 22px;
  color: var(--cca-navy-900);
  margin: 0 0 10px;
}

.cca-volunteer-intro {
  font-size: 14.5px;
  color: var(--cca-ink-600);
  max-width: 66ch;
  line-height: 1.65;
  margin: 0 0 22px;
  font-weight: normal;
}

.cca-volunteer-cta {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--cca-ink-600);
  font-weight: normal;
}
.cca-volunteer-cta a {
  color: var(--cca-navy-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cca-volunteer-cta a:hover { color: var(--cca-navy-600); }

/* ── Form section wrapper (page chrome only — the form itself is
   the {convertforms 2} embed, styled via its own Design tab) ── */
.cca-volunteer-form-section {
  border-top: 1px solid var(--cca-line);
  padding: 44px 40px 56px;
  background: #FAFAFA;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .open-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .cca-page-banner        { padding: 28px 20px 24px; }
  .cca-volunteer-sections { padding: 0 20px; }
  .cca-volunteer-form-section { padding: 40px 20px 48px; }
  .open-grid,
  .cca-volunteer-sections .cca-involve-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   CITADEL — Upcoming Events & Programs section
   Paste at the bottom of user.css
   This block never needs to change — all updates happen
   in the module HTML only.
   ============================================================ */

.events-section {
  padding: 56px 28px 64px;
  background: #ffffff;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.events-section h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 600;
  color: #112855;
  margin: 0 0 32px;
  line-height: 1.1;
}

/* Six-card grid — 3 columns on desktop */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card shell */
.ev-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #E4DCC9;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ev-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px -12px rgba(17, 40, 85, 0.25);
}

/* Clickable overlay — whole card is a link */
.ev-card-anchor {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Image area — fixed 4:3 ratio */
.ev-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #E4DCC9;
}

.ev-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.ev-card:hover .ev-card-media img {
  transform: scale(1.04);
}

/* Placeholder for cards without an image yet */
.ev-card-media-placeholder {
  aspect-ratio: 1 / 1;
  background: #112855;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.2);
}

/* Text content */
.ev-card-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.ev-card-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #221F1A;
  margin: 0;
  line-height: 1.2;
}

.ev-card-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #044283;
  letter-spacing: 0.02em;
}

.ev-card-body p {
  margin: 0;
  color: #5C5748;
  font-size: 14px;
  line-height: 1.55;
  flex: 1;
  font-weight: 400;
}

.ev-card-link {
  margin-top: 6px;
  font-weight: 600;
  font-size: 13.5px;
  color: #044283;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Responsive — 2 columns on tablet */
@media (max-width: 900px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Single column on mobile */
@media (max-width: 560px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   CCA HALL RENTALS — user.css additions
   ============================================================
   Add these rules to the bottom of your existing user.css file.

   Path: System → Site Templates → Cassiopeia Details and Files
         → css → user.css

   NOTES:
   - All rules use .rental-* and .rate-* prefixes to avoid
     affecting any other page on the site.
   - CSS variables (--cca-navy-900 etc.) are already declared
     in user.css via the Board of Directors block — no need
     to redeclare them here.
   - The page banner (.cca-page-banner, .cca-eyebrow, h1,
     .cca-banner-lead) is already in user.css from the Garden
     page — no new banner CSS is needed for the rentals page.
   - The Google Fonts @import is already in user.css — do not
     add it again.
   ============================================================ */


/* ============================================================
   PAGE BODY WRAPPER
   Provides consistent padding on desktop and mobile,
   matching the pattern used on the membership and board pages.
   ============================================================ */

.rental-body {
  padding: 28px 36px 56px;
}

@media (max-width: 520px) {
  .rental-body {
    padding: 20px 16px 40px;
  }
}


/* ============================================================
   ADDRESS BAR
   ============================================================ */

.rental-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--cca-navy-900);
  border-radius: 8px;
  padding: .7rem 1.1rem;
  margin-bottom: 1.75rem;
  text-decoration: none;
}

.rental-address:hover {
  background: #0B1D3F;
}

.rental-address-text {
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rental-address-link {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rental-address:hover .rental-address-link {
  color: #fff;
}


/* ============================================================
   PHOTOS
   ============================================================ */

.rental-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1.75rem;
}

.rental-photos img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}


/* ============================================================
   STATS BAR
   ============================================================ */

.rental-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1.75rem;
}

.rental-stat {
  background: #DFDFDF;
  border-radius: 8px;
  padding: .8rem 1rem;
  text-align: center;
}

.rental-stat-num {
  font-size: 20px;
  font-weight: 500;
  color: var(--cca-navy-900);
}

.rental-stat-label {
  font-size: 12px;
  color: var(--cca-ink-600);
  margin-top: 2px;
  font-weight: normal;
}


/* ============================================================
   CTA BUTTONS
   ============================================================ */

.rental-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.rental-btn-primary,
.rental-btn-primary:link,
.rental-btn-primary:visited {
  background: var(--cca-navy-700);
  color: #fff;
  border-radius: 8px;
  padding: .6rem 1.2rem;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rental-btn-primary:hover {
  background: var(--cca-navy-900);
  color: #fff;
}

.rental-btn-accent,
.rental-btn-accent:link,
.rental-btn-accent:visited {
  background: var(--cca-red-500);
  color: #fff;
  border-radius: 8px;
  padding: .6rem 1.2rem;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rental-btn-accent:hover {
  background: #B5211E;
  color: #fff;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.rental-divider {
  height: .5px;
  background: var(--cca-line);
  margin: 1.75rem 0;
}


/* ============================================================
   OVERRIDE GLOBAL BOLD <p> RULE
   The site-wide p { font-weight: bold } rule in user.css would
   make all paragraph text in rental sections bold without this.
   ============================================================ */

.rental-body p,
.rental-rates p,
.rental-accordion p,
.acc-body p,
.rate-nudge-inner p,
.acc-notice {
  font-weight: normal;
}


/* ============================================================
   PRICING CARDS
   ============================================================ */

.rental-rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 1.75rem;
}

.rate-card {
  border-radius: 12px;
  border: .5px solid var(--cca-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rate-card-head {
  padding: .9rem 1.1rem;
}

.rate-card-head--navy {
  background: var(--cca-navy-900);
}

.rate-card-head--cream {
  background: #DFDFDF;
}

.rate-card-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.rate-card-label--muted {
  color: var(--cca-ink-600);
}

.rate-card-title {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  margin-top: 3px;
}

.rate-card-title--dark {
  color: var(--cca-navy-900);
}

.rate-card-badge {
  display: inline-block;
  background: var(--cca-red-500);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 20px;
  margin-top: 5px;
}

/* flex: 1 so both card bodies stretch to equal height */
.rate-card-body {
  padding: .9rem 1.1rem;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* min-height keeps rows level across both cards */
.rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem 0;
  border-bottom: .5px solid var(--cca-line);
  font-size: 14px;
  min-height: 40px;
}

.rate-row:last-of-type {
  border-bottom: none;
}

.rate-row-label {
  color: var(--cca-ink-600);
  font-weight: normal;
}

.rate-row-val {
  font-weight: 500;
  color: var(--cca-ink-900);
  text-align: right;
}

/* GST note — pushed to bottom of member card */
.rate-gst {
  font-size: 12px;
  color: var(--cca-ink-600);
  font-weight: normal;
  margin-top: auto;
  background: #DFDFDF;
  border-radius: 6px;
  padding: .6rem .8rem;
}

/* Membership nudge — pushed to bottom of non-member card */
.rate-nudge {
  margin-top: auto;
  padding-top: .65rem;
}

.rate-nudge-inner {
  background: #EEF2FA;
  border: .5px solid #C5D2EC;
  border-radius: 8px;
  padding: .65rem .9rem;
  font-size: 13px;
  color: var(--cca-ink-600);
  line-height: 1.5;
  font-weight: normal;
}

.rate-nudge-inner strong {
  color: var(--cca-ink-900);
  font-weight: 600;
}

.rate-nudge-inner a,
.rate-nudge-inner a:link,
.rate-nudge-inner a:visited {
  color: var(--cca-navy-700);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: .4rem;
  font-size: 13px;
}

.rate-nudge-inner a:hover {
  color: var(--cca-navy-900);
  text-decoration: underline;
}


/* ============================================================
   ACCORDIONS
   Uses native HTML <details>/<summary> — no JavaScript needed.
   ============================================================ */

.rental-accordion {
  border: .5px solid var(--cca-line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.rental-accordion details {
  border-bottom: .5px solid var(--cca-line);
}

.rental-accordion details:last-child {
  border-bottom: none;
}

.rental-accordion summary {
  padding: 1rem 1.1rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--cca-ink-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rental-accordion summary::-webkit-details-marker {
  display: none;
}

/* Plus / minus indicator */
.rental-accordion summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  color: var(--cca-ink-600);
  flex-shrink: 0;
  line-height: 1;
}

.rental-accordion details[open] summary::after {
  content: "−";
}

.rental-accordion summary:hover {
  background: #DFDFDF;
}

.rental-accordion details[open] summary {
  color: var(--cca-navy-700);
}

.acc-body {
  padding: .25rem 1.1rem 1.1rem;
  font-size: 15px;
  color: var(--cca-ink-600);
  line-height: 1.7;
  font-weight: normal;
}

.acc-body p {
  margin-bottom: .6rem;
  font-weight: normal;
}

.acc-body ul {
  padding-left: 1.1rem;
  margin-top: .4rem;
  margin-bottom: .4rem;
}

.acc-body li {
  margin-bottom: .3rem;
}

.acc-body strong {
  color: var(--cca-ink-900);
  font-weight: 600;
}

/* Notice box inside accordion */
.acc-notice {
  background: #DFDFDF;
  border-left: 2px solid var(--cca-navy-700);
  border-radius: 0 6px 6px 0;
  padding: .65rem .9rem;
  font-size: 14px;
  color: var(--cca-ink-600);
  margin-top: .65rem;
  font-weight: normal;
}


/* ============================================================
   RESPONSIVE — mobile
   ============================================================ */

@media (max-width: 520px) {

  .rental-photos {
    grid-template-columns: 1fr;
  }

  .rental-photos img {
    height: 200px;
  }

  .rental-stats {
    grid-template-columns: 1fr 1fr;
  }

  .rental-stat:last-child {
    grid-column: 1 / -1;
  }

  .rental-rates {
    grid-template-columns: 1fr;
  }

  .rental-address {
    flex-direction: column;
    align-items: flex-start;
  }

}
/* ============================================================
   CITADEL — Fitness Classes page
   Add this entire block to the bottom of user.css.

   Path: System → Site Templates → Cassiopeia Details and Files
         → css → user.css

   REQUIRES (already in user.css, not redeclared here):
   - .cca-page-banner / .cca-eyebrow / .cca-banner-lead
   - --cca-navy-900 / --cca-navy-700 / --cca-navy-600 /
     --cca-ink-900 / --cca-ink-600 / --cca-line CSS variables
   - .cca-btn-navy (shared sitewide CTA button)
   - Font Awesome 6 in the template <head>

   Layout follows the Book Club / Yoga page pattern for the class
   info: poster image in a fixed-width left column, description
   on the right, with a schedule details card under the poster
   (.cca-fitness-grid / .cca-fitness-poster / .cca-fitness-meta).

   The instructor section stays full width below, unchanged in
   structure from the previous version of this page.
   ============================================================ */

.cca-fitness-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 28px 56px;
}

.cca-fitness-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}

/* --- Left column: poster + schedule card --- */
.cca-fitness-poster {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(17, 40, 85, 0.25);
  border: 1px solid var(--cca-line);
  display: block;
  width: 100%;
}

.cca-fitness-meta {
  margin-top: 20px;
  background: #ffffff;
  border: 1px solid var(--cca-line);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cca-fitness-meta-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--cca-ink-900);
  font-weight: normal;
}

.cca-fitness-meta-row i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cca-navy-700);
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.cca-fitness-meta-row b {
  font-weight: 600;
}

.cca-fitness-meta-divider {
  border-top: 1px solid var(--cca-line);
  margin: 2px 0;
}

.cca-fitness-meta-chip {
  align-self: flex-start;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cca-navy-700);
  background: rgba(17, 40, 85, .08);
  padding: 4px 10px;
  border-radius: 999px;
}

/* --- Right column: description --- */
.cca-fitness-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cca-navy-700);
  margin-bottom: 10px;
}

.cca-fitness-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--cca-navy-900);
  margin: 0 0 14px;
}

.cca-fitness-body .cca-fitness-subhead {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cca-navy-700);
  margin: 0 0 16px;
}

.cca-fitness-body p {
  font-size: 16px;
  color: var(--cca-ink-600);
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 0 18px;
  font-weight: normal;
}

.cca-fitness-body p:last-of-type {
  margin-bottom: 0;
}

.cca-fitness-cta-wrap {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- Divider between class info + instructor --- */
.cca-fitness-divider {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.cca-fitness-divider hr {
  border: none;
  border-top: 1px solid var(--cca-line);
  margin: 0 0 48px;
}

/* --- Instructor section — full width below, unchanged shape --- */
.cca-fitness-instructor {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px 72px;
}

.cca-fitness-instr-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: start;
}

.cca-fitness-instr-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--cca-line);
  box-shadow: 0 10px 30px -12px rgba(17, 40, 85, .25);
}

.cca-fitness-instr-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--cca-navy-900);
  margin: 0 0 4px;
}

.cca-fitness-instr-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cca-navy-700);
  margin: 0 0 16px;
}

.cca-fitness-instr-bio p {
  font-size: 15.5px;
  color: var(--cca-ink-600);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 0 14px;
  font-weight: normal;
}

.cca-fitness-instr-bio p:last-child {
  margin-bottom: 0;
}

.cca-fitness-instr-bio strong {
  color: var(--cca-ink-900);
}

.cca-fitness-instr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.cca-fitness-instr-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(17, 40, 85, .08);
  color: var(--cca-navy-700);
  padding: 5px 11px;
  border-radius: 999px;
}

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .cca-fitness-grid {
    grid-template-columns: 1fr;
  }
  .cca-fitness-instr-grid {
    grid-template-columns: 1fr;
  }
  .cca-fitness-instr-photo {
    max-width: 220px;
  }
}

@media (max-width: 640px) {
  .cca-fitness-section,
  .cca-fitness-divider,
  .cca-fitness-instructor {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* ============================================================
   CITADEL — Yoga Class page
   Add this entire block to the bottom of user.css.

   Path: System → Site Templates → Cassiopeia Details and Files
         → css → user.css

   REQUIRES (already in user.css, not redeclared here):
   - .cca-page-banner / .cca-eyebrow / .cca-banner-lead
   - --cca-navy-900 / --cca-navy-700 / --cca-navy-600 /
     --cca-ink-900 / --cca-ink-600 / --cca-line CSS variables
   - .cca-btn-navy (shared sitewide CTA button)
   - Font Awesome 6 in the template <head>

   Layout follows the Book Club page pattern: poster image in a
   fixed-width left column, class description on the right, with
   a details card sitting under the poster (same shape as
   .cca-bookclub-grid / .cca-bookclub-poster / .cca-bookclub-meta,
   renamed here to .cca-yoga- so it doesn't collide).

   Single-section layout for now — no instructor block until a
   bio is available.
   ============================================================ */

.cca-yoga-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}

.cca-yoga-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}

/* --- Left column: poster + details card --- */
.cca-yoga-poster {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(17, 40, 85, 0.25);
  border: 1px solid var(--cca-line);
  display: block;
  width: 100%;
}

.cca-yoga-meta {
  margin-top: 20px;
  background: #ffffff;
  border: 1px solid var(--cca-line);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cca-yoga-meta-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--cca-ink-900);
  font-weight: normal;
}

.cca-yoga-meta-row i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cca-navy-700);
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.cca-yoga-meta-row b {
  font-weight: 600;
}

.cca-yoga-meta-divider {
  border-top: 1px solid var(--cca-line);
  margin: 2px 0;
}

/* --- Right column: description --- */
.cca-yoga-subeyebrow {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cca-navy-700);
  margin-bottom: 10px;
}

.cca-yoga-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--cca-navy-900);
  margin: 0 0 14px;
}

.cca-yoga-body .cca-yoga-subhead {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cca-navy-700);
  margin: 0 0 16px;
}

.cca-yoga-body p {
  margin: 0 0 18px;
  color: var(--cca-ink-600);
  font-size: 16px;
  max-width: 62ch;
  font-weight: normal;
  line-height: 1.7;
}

.cca-yoga-body p:last-of-type {
  margin-bottom: 0;
}

.cca-yoga-body strong {
  color: var(--cca-ink-900);
}

.cca-yoga-bring {
  font-size: 15px;
  color: var(--cca-ink-600);
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 0 18px;
}

.cca-yoga-cta-wrap {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .cca-yoga-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cca-yoga-section {
    padding: 28px 20px 56px;
  }
}
/* =========================================================
   Stitch 'n Chat article page — add to user.css
   =========================================================

   Same structure as the Book Club block: banner reuses the
   existing .cca-page-banner / .cca-eyebrow / .cca-banner-lead
   (already in user.css) — not redeclared here. Design tokens
   (--cca-navy-900, --cca-ink-600, --cca-line, etc.) are also
   already declared (Board of Directors block) — reused, not
   redeclared.

   All new rules below are prefixed .cca-stitch- so they can't
   collide with the Book Club's .cca-bookclub- rules or anything
   else on the site.
   ========================================================= */

.cca-stitch-section{
  max-width:1200px;margin:0 auto;padding:40px 28px 80px;
}
.cca-stitch-grid{
  display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start;
}
.cca-stitch-poster{
  border-radius:14px;overflow:hidden;
  box-shadow:0 10px 30px -12px rgba(17,40,85,0.25);
  border:1px solid var(--cca-line);
}
.cca-stitch-meta{
  margin-top:20px;background:#fff;border:1px solid var(--cca-line);border-radius:14px;
  padding:20px 22px;display:flex;flex-direction:column;gap:12px;
}
.cca-stitch-meta-row{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--cca-ink-900);font-weight:normal;}
.cca-stitch-meta-row i.fa-solid{
  flex-shrink:0;margin-top:2px;color:var(--cca-navy-700);font-size:15px;width:18px;text-align:center;
}
.cca-stitch-meta-row b{font-weight:600;}
.cca-stitch-meta-row .cca-contact-link{font-weight:600;color:var(--cca-navy-700);text-decoration:none;}
.cca-stitch-meta-row .cca-contact-link:hover{color:#224FAA;}
.cca-stitch-cost{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.02em;background:rgba(17,40,85,.08);color:var(--cca-navy-700);
  padding:6px 12px;border-radius:999px;width:fit-content;
}

/* Divider reuses .cca-divider as-is, just trimmed to fit the compact card */
.cca-stitch-meta .cca-divider{margin:2px 0;}

/* Small mono-uppercase label above the write-up heading, same pattern
   as .cca-eyebrow / .cca-bookclub-subeyebrow elsewhere on the site */
.cca-stitch-subeyebrow{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--cca-navy-700);margin-bottom:10px;
}

.cca-stitch-body h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:24px;color:var(--cca-navy-900);margin-bottom:14px;}
.cca-stitch-body p{margin:0 0 18px;color:var(--cca-ink-600);font-size:16px;max-width:62ch;font-weight:normal;}
.cca-stitch-body p:last-child{margin-bottom:0;}
.cca-stitch-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px;}
.cca-stitch-list li{font-size:15.5px;color:var(--cca-ink-900);padding-left:18px;position:relative;font-weight:normal;}
.cca-stitch-list li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--cca-navy-700);
}

/* Membership CTA — navy pill, same shape as other site CTAs
   (.hero-btn-primary, .gi-btn) but navy rather than red, matching
   the red→navy swap already applied on the Book Club page */
.cca-stitch-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  padding:12px 22px;border-radius:999px;background:var(--cca-navy-700);
  color:#fff;font-weight:600;font-size:14px;text-decoration:none;
}
.cca-stitch-cta:hover{background:var(--cca-navy-900);color:#fff;}
.cca-stitch-cta i{font-size:12px;}

@media (max-width:820px){
  .cca-stitch-grid{grid-template-columns:1fr;}
}
.rental-cta-bottom {
  padding: 28px 36px 40px;
}

.rental-cta-instruction {
  font-size: 15px;
  color: #5C5748;
  line-height: 1.7;
  max-width: 65ch;
  margin-bottom: 1.25rem;
  font-weight: normal;
}

.rental-cta-instruction strong {
  color: #221F1A;
  font-weight: 600;
}
.rental-cta-note {
  font-size: 15px;
  color: #5C5748;
  line-height: 1.6;
  margin-bottom: .75rem;
  font-weight: normal;
  width: 100%;
}
/* ============================================================
   CITADEL — About Us page
   Add this entire block to the bottom of user.css.

   Path: System → Site Templates → Cassiopeia Details and Files
         → css → user.css

   REQUIRES (already in user.css, not redeclared here):
   - .cca-page-banner / .cca-eyebrow / .cca-banner-lead
     (from Board of Directors / Community Garden / Programs pages)
   - .cca-involve-section / .cca-involve-grid / .cca-involve-card /
     .cca-involve-icon / .cca-involve-link / .cca-involve-anchor
     (from Get Involved / Programs pages) — used AS-IS below, no
     overrides, so the card grid needs zero new CSS.
   - --cca-navy-900 / --cca-navy-700 / --cca-navy-600 /
     --cca-ink-900 / --cca-ink-600 / --cca-line CSS variables
     (from Board of Directors build)
   - Font Awesome 6 in the template <head>

   Only the intro-section rules below are new, all prefixed
   .cca-about- so they can't collide with anything else on the
   site. The card grid section reuses .cca-involve-* wholesale.
   ============================================================ */

.cca-about-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 52px 28px 8px;
}

.cca-about-intro .cca-about-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cca-navy-600);
  margin-bottom: 14px;
}

.cca-about-intro h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--cca-navy-900);
  margin: 0 0 18px;
}

.cca-about-intro p {
  font-size: 16px;
  color: var(--cca-ink-600);
  line-height: 1.75;
  margin: 0 0 18px;
  font-weight: normal;
}

/* Mission statement pull-quote — same grey as the homepage
   Stay Connected section background (#DFDFDF) */
.cca-about-mission {
  background: #DFDFDF;
  border-left: 3px solid var(--cca-navy-700);
  border-radius: 4px;
  padding: 22px 26px;
  margin: 28px 0;
}

.cca-about-mission p {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--cca-navy-900);
  line-height: 1.55;
  margin: 0;
  font-weight: 400;
}

.cca-about-mission span {
  display: block;
  margin-top: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cca-navy-700);
}

.cca-about-vision-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cca-about-vision-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--cca-ink-900);
  line-height: 1.55;
}

.cca-about-vision-list li i {
  color: var(--cca-navy-700);
  font-size: 13px;
  margin-top: 4px;
  flex-shrink: 0;
}

.cca-about-divider {
  border: none;
  border-top: 1px solid var(--cca-line);
  margin: 36px 0;
}

/* Cards section head — reuses .cca-involve-section for the wrapper
   padding, adds its own label + heading above the (unmodified)
   .cca-involve-grid */
.cca-involve-section {
  padding: 12px 0 88px;
}

.cca-involve-section .cca-about-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cca-navy-600);
  margin-bottom: 10px;
}

.cca-involve-section .cca-about-section-head {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  margin-bottom: 30px;
}

.cca-involve-section .cca-about-section-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--cca-navy-900);
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--cca-navy-900);
  display: inline-block;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .cca-about-intro {
    padding: 36px 20px 8px;
  }
  .cca-involve-section {
    padding: 8px 0 56px;
  }
  .cca-involve-section .cca-about-section-head {
    padding: 0 20px;
  }
  .cca-about-mission {
    padding: 20px 20px;
  }
}
/* ============================================================
   CITADEL — Christmas Market Vendor Applications page
   Add this entire block to the bottom of user.css.

   Path: System → Site Templates → Cassiopeia Details and Files
         → css → user.css

   REQUIRES (already in user.css, not redeclared here):
   - .cca-page-banner / .cca-eyebrow / .cca-banner-lead
   - .cca-reg-open / .cca-reg-open-icon / .cca-reg-open-text
     (Community Garden block)
   - .cca-contact / .cca-contact-intro / .cca-contact-names /
     .cca-contact-link
   - --cca-navy-900 / --cca-navy-700 / --cca-ink-900 /
     --cca-ink-600 / --cca-line CSS variables
   - Font Awesome 6.5.1 (loaded sitewide)

   All new rules below are prefixed .cca-vendor- so they can't
   collide with any other page's classes.
   ============================================================ */

.cca-vendor-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 28px 88px;
}

.cca-vendor-h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--cca-navy-900);
  margin: 0 0 22px;
}

/* --- How It Works — 3 step strip --- */
.cca-vendor-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.cca-vendor-step {
  background: #ffffff;
  border: 1px solid var(--cca-line);
  border-radius: 14px;
  padding: 24px 22px;
  position: relative;
}

.cca-vendor-step-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cca-navy-700);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}

.cca-vendor-step-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(17, 40, 85, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.cca-vendor-step-icon i {
  color: var(--cca-navy-700);
  font-size: 17px;
}

.cca-vendor-step h3 {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cca-ink-900);
  margin: 0 0 8px;
  font-family: 'Inter', sans-serif;
}

.cca-vendor-step p {
  font-size: 14px;
  color: var(--cca-ink-600);
  line-height: 1.6;
  margin: 0;
  font-weight: normal;
}

/* --- Key info card --- */
.cca-vendor-info {
  background: #F5F4F1;
  border: 1px solid var(--cca-line);
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cca-vendor-info-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--cca-ink-900);
  font-weight: normal;
}

.cca-vendor-info-row i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cca-navy-700);
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.cca-vendor-info-row b {
  font-weight: 600;
}

.cca-vendor-placeholder-pill {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(17, 40, 85, .08);
  color: var(--cca-navy-700);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.cca-vendor-info-divider {
  border-top: 1px solid var(--cca-line);
  margin: 2px 0;
}

/* --- Application form placeholder --- */
.cca-vendor-form-wrap {
  border: 2px dashed #B9B2A0;
  border-radius: 14px;
  padding: 40px 28px;
  text-align: center;
  color: var(--cca-ink-600);
  font-size: 14px;
  background: #ffffff;
  margin-bottom: 40px;
}

.cca-vendor-form-wrap i {
  font-size: 22px;
  color: var(--cca-navy-700);
  margin-bottom: 10px;
  display: block;
}

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .cca-vendor-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cca-vendor-section {
    padding: 28px 20px 56px;
  }
}
/* ============================================================
   CITADEL — Community Clean Up event page
   Append this entire block to the bottom of user.css.

   Path: System → Site Templates → Cassiopeia Details and Files
         → css → user.css

   REQUIRES (already in user.css, not redeclared here):
   - --cca-navy-900 / --cca-navy-700 / --cca-navy-600 /
     --cca-ink-900 / --cca-line CSS variables
     (from the Board of Directors build)

   All rules below are prefixed .cca-cleanup- so they can't
   collide with any other page's classes. Scoped entirely to
   this article — will not affect other JEvents event pages,
   which don't use these classes.

   Reuses this year over year: only the <span class="cca-cleanup-tag">
   text content in the article HTML needs updating if the
   accepted/not-accepted lists change for a future clean-up.
   The date/time/location in the details card above this block
   is unaffected by anything here.

   Contrast checked: tag text colors below (navy-900 on the navy
   tint, and #791F1F on the red tint) both exceed WCAG AAA
   (7:1) against their pill backgrounds.
   ============================================================ */

.cca-cleanup-block {
  margin-top: 8px;
}

/* ── Section label — same pattern as .cca-badminton-label ── */
.cca-cleanup-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cca-navy-600);
  margin-bottom: 14px;
}

.cca-cleanup-label--danger {
  color: #791F1F;
}

/* ── Note under the "cannot accept" label ── */
.cca-cleanup-note {
  font-size: 12.5px;
  color: #791F1F;
  font-weight: 500 !important;
  margin: 0 0 12px;
}

/* ── Card — grey background matching .cca-finder / .cca-badminton-membership ── */
.cca-cleanup-card {
  background: #DFDFDF;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.cca-cleanup-card--last {
  margin-bottom: 32px;
}

.cca-cleanup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Accepted item tag — same shape as .cca-fitness-instr-tag ── */
.cca-cleanup-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(17, 40, 85, 0.08);
  color: var(--cca-navy-900);
  padding: 5px 11px;
  border-radius: 999px;
}

/* ── Not-accepted item tag — same shape as .open-badge, darker text for contrast ── */
.cca-cleanup-tag--no {
  background: #FEF2F2;
  color: #791F1F;
  border: 1px solid #FECACA;
  padding: 4px 10px;
}

/* ── Special notes list — same dot-bullet pattern as .cca-bookclub-list / .cca-stitch-list ── */
.cca-cleanup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cca-cleanup-list li {
  font-size: 15px;
  color: var(--cca-ink-900);
  padding-left: 18px;
  position: relative;
  font-weight: normal;
  line-height: 1.6;
}

.cca-cleanup-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cca-navy-700);
}

.cca-cleanup-list a {
  color: var(--cca-navy-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cca-cleanup-list a:hover {
  color: var(--cca-navy-600);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .cca-cleanup-card {
    padding: 14px 16px;
  }
}
/* ============================================================
   CITADEL — Programs page
   Add this block to the bottom of user.css.

   This page reuses .cca-page-banner (from the Board of Directors /
   Community Garden block) and .cca-involve-section / .cca-involve-grid /
   .cca-involve-card / .cca-involve-icon / .cca-involve-link /
   .cca-involve-anchor (from the Get Involved block) unchanged —
   neither is redeclared here.

   Only the rules below are new:
     - .cca-programs-section / .cca-programs-title  (category headings)
     - .cca-involve-card.is-upcoming + .cca-coming-soon-chip
       (the "coming soon" card state, e.g. Book Club)
   ============================================================ */

/* Section wrapper — gives each category (Fitness & Sports, Social)
   the same 1200px/28px gutters as .cca-involve-grid, and controls
   the vertical rhythm between repeated category blocks. */
.cca-programs-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.cca-programs-section + .cca-programs-section {
  margin-top: 8px;
}

/* Category title — Fraunces heading with a short navy rule
   underneath (var(--cca-navy-900)), not the red accent, since
   this is a structural label rather than a call to action. */
.cca-programs-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--cca-navy-900);
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--cca-navy-900);
  display: inline-block;
}

/* Coming-soon card state — same .cca-involve-card shape, dashed
   border and muted icon so it reads as "not yet active" rather
   than broken or missing content. Used on cards with no link
   (e.g. Book Club). */
.cca-involve-card.is-upcoming {
  background: #FAF8F3;
  border-style: dashed;
}

.cca-involve-card.is-upcoming .cca-involve-icon {
  background: rgba(17, 40, 85, .35);
}

.cca-involve-card.is-upcoming h3 {
  color: var(--cca-ink-600);
}

.cca-coming-soon-chip {
  align-self: flex-start;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cca-navy-700);
  background: rgba(17, 40, 85, .08);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .cca-programs-title {
    margin-bottom: 22px;
  }
}
/* ============================================================
  /* ============================================================
   CITADEL — Header identity bar (logo + Become a Member)
   Append this block to user.css.

   Reuses, unchanged: .cca-btn-navy (shared CTA button — already
   in user.css, do not redeclare it here).

   New classes are scoped with the .cca-header-* prefix so they
   can't collide with Cassiopeia/Bootstrap's own .nav / .btn
   classes elsewhere on the site.

   This module handles ONLY the logo + Become a Member row.
   The main menu (with Login as a menu item) is a separate
   module/position, styled separately.
   ============================================================ */

.cca-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 76px;
  background: #ffffff;
  border-bottom: 1px solid #E4DCC9;
  max-width: 1275px;
  margin: 0 auto;
}

.cca-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.cca-header-logo {
  height: 42px;
  width: auto;
  display: block;
}

/* Desktop/default brand text: "Citadel" + "Community Association" */
.cca-header-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

.cca-header-brand-text .name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--cca-navy-900);
  white-space: nowrap;
}

.cca-header-brand-text .sub {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cca-navy-900);
  opacity: 0.75;
  white-space: nowrap;
  margin-top: 1px;
}

/* Mobile-only brand text: three-line stack, hidden by default */
.cca-header-brand-stack {
  display: none;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.cca-header-brand-stack span {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cca-navy-900);
  white-space: nowrap;
}

.cca-header-brand-stack span:first-child {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 1px;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .cca-header-bar {
    height: 60px;
    padding: 0 16px;
  }

  .cca-header-logo {
    height: 38px;
  }

  .cca-header-brand-text {
    display: none;
  }

  .cca-header-brand-stack {
    display: flex;
  }

  .cca-header-bar .cca-btn-navy {
    padding: 8px 14px;
    font-size: 13px;
  }
}
/* ============================================================
   NAV — Navy bar, white text (Cassiopeia "Collapsible Dropdown"
   metismenu markup). Append this block to user.css.

   Targets the REAL rendered structure, confirmed live:

   .container-nav
     nav.navbar
       button.navbar-toggler > span.icon-menu      (mobile toggle)
       div.collapse.navbar-collapse#navbar258
         ul.mod-menu.metismenu.mod-list
           li.metismenu-item.level-1 > a            (top-level links)
           li.metismenu-item.level-1.parent         ("Rentals")
             > button.mm-toggler                    (expand toggle)
             > ul.mm-collapse                        (sub-items)
               li.metismenu-item.level-2 > a

   Do NOT also apply the earlier nav-toggler-color-fix.txt —
   with a navy background, the toggler's default white
   border/icon is already correct on its own. Applying both
   would be redundant, not harmful, but skip it to keep the
   CSS clean.
   ============================================================ */

.container-nav {
  background: var(--cca-navy-900);
  max-width: 1275px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.container-nav .navbar {
  padding: 0 28px;
  width: 100%
}

/* Right-align the toggler when the menu is collapsed — with
   nothing else visible in the row to balance against, it
   otherwise sits at the flex start (left) by default */
.container-nav .navbar-toggler {
  margin-left: auto;
}

/* Top-level links */
.container-nav .metismenu-item.level-1 > a,
.container-nav .metismenu-item.level-1 > a:link,
.container-nav .metismenu-item.level-1 > a:visited {
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 500;
  padding: 13px 16px;
  display: block;
}

.container-nav .metismenu-item.level-1 > a:hover,
.container-nav .metismenu-item.level-1 > a:focus {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1);
}

/* Current page — force visible on navy regardless of the theme's
   own active-state color, plus a small red underline to match
   the site's accent color */
.container-nav .metismenu-item.level-1.active > a,
.container-nav .metismenu-item.level-1.active > a:link,
.container-nav .metismenu-item.level-1.active > a:visited {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -2px 0 var(--cca-red-500, #D52A27);
}

/* "Rentals" expand toggle — caret/icon needs to be white to stay
   visible on navy (was navy-on-white before, now would be
   navy-on-navy without this) */
.container-nav .mm-toggler,
.container-nav .mm-toggler::before,
.container-nav .mm-toggler::after {
  color: #ffffff !important;
}

/* Sub-item panel ("Availability", "Rental Inquiry") — light
   background so it doesn't disappear against the navy bar,
   red top accent to match the dropdown treatment used
   elsewhere on the site */
.container-nav .mm-collapse {
  background: #ffffff;
  border-top: 3px solid var(--cca-red-500, #D52A27);
  box-shadow: 0 8px 20px rgba(17, 40, 85, 0.15);
}

.container-nav .mm-collapse .metismenu-item.level-2 > a,
.container-nav .mm-collapse .metismenu-item.level-2 > a:link,
.container-nav .mm-collapse .metismenu-item.level-2 > a:visited {
  color: var(--cca-navy-900) !important;
  font-size: 13.5px;
  padding: 9px 18px;
  display: block;
}

.container-nav .mm-collapse .metismenu-item.level-2 > a:hover {
  color: var(--cca-navy-700, #044283) !important;
  background: #F0F2F7;
}

/* ============================================================
   OPTIONAL — only add this if, once live, "Rentals" expanding
   pushes the rest of the bar down awkwardly on desktop instead
   of dropping below just that item. Test the default behavior
   first before uncommenting.
   ============================================================ */

/*
@media (min-width: 992px) {
  .container-nav .metismenu-item.parent {
    position: relative;
  }

  .container-nav .mm-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    z-index: 20;
  }
}
/* ============================================================
   CITADEL — ELM (Landscape Levy) page
   Append this entire block to the bottom of user.css.

   REUSES (already in user.css — not redeclared here):
   - .cca-page-banner / .cca-eyebrow / .cca-banner-lead
   - .cca-divider
   - .cca-btn-navy
   - .email-link (+ sitewide click handler in user.js)
   - Font Awesome 6.5.1 loaded globally

   COLOURS — all written as literal hex (no var() references)
   since --cca-* variables are only reliable inside .cca-board:
     navy-900  #112855
     navy-700  #044283
     ink-900   #221F1A
     ink-600   #5C5748
     grey      #DFDFDF
     line      #E4DCC9
   ============================================================ */

/* ── Page wrapper ── */
.cca-elm-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 28px 72px;
}

/* ── Quarterly update card ── */
.cca-elm-update {
  background: #ffffff;
  border: 1px solid #E4DCC9;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
}

.cca-elm-update-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
}

.cca-elm-update-content {
  padding: 28px 32px;
}

.cca-elm-update-photo {
  border-left: 1px solid #E4DCC9;
  overflow: hidden;
}

.cca-elm-update-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cca-elm-update-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.cca-elm-update-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #5C5748;
}

.cca-elm-update-season {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #112855;
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 999px;
}

.cca-elm-update h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #112855;
  margin-bottom: 12px;
  line-height: 1.2;
}

.cca-elm-update p {
  font-size: 15px;
  color: #5C5748;
  line-height: 1.7;
  margin-bottom: 14px;
  font-weight: normal;
  max-width: 68ch;
}

.cca-elm-update p:last-of-type {
  margin-bottom: 0;
}

.cca-elm-update-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Stat cards ── */
.cca-elm-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.cca-elm-stat-card {
  background: #DFDFDF;
  border-radius: 14px;
  padding: 22px 24px;
}

.cca-elm-stat-val {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: #112855;
  line-height: 1;
  margin-bottom: 6px;
}

.cca-elm-stat-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5C5748;
  margin-bottom: 8px;
}

.cca-elm-stat-desc {
  font-size: 13px;
  color: #5C5748;
  line-height: 1.55;
  font-weight: normal;
  margin: 0;
}

/* ── Section label + heading (shared pattern for both sections) ── */
.cca-elm-section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #5C5748;
  margin-bottom: 10px;
}

.cca-elm-section-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #112855;
  margin-bottom: 24px;
}

/* ── Covers grid — "More than the City provides" ── */
.cca-elm-covers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.cca-elm-cover-card {
  background: #ffffff;
  border: 1px solid #E4DCC9;
  border-radius: 14px;
  padding: 22px 20px;
}

.cca-elm-cover-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #DFDFDF;
  color: #112855;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 16px;
}

.cca-elm-cover-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: #221F1A;
  margin-bottom: 6px;
}

.cca-elm-cover-card p {
  font-size: 13px;
  color: #5C5748;
  line-height: 1.55;
  font-weight: normal;
  margin: 0;
}

/* ── Levy vs membership compare row ── */
.cca-elm-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 0;
}

.cca-elm-levy-card {
  background: #DFDFDF;
  border-radius: 14px;
  padding: 26px 28px;
}

.cca-elm-memb-card {
  background: #112855;
  border-radius: 14px;
  padding: 26px 28px;
}

.cca-elm-card-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cca-elm-levy-card .cca-elm-card-tag {
  color: #5C5748;
}

.cca-elm-memb-card .cca-elm-card-tag {
  color: rgba(255, 255, 255, 0.55);
}

.cca-elm-levy-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #112855;
  margin-bottom: 10px;
}

.cca-elm-memb-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 10px;
}

.cca-elm-levy-card p {
  font-size: 14px;
  color: #5C5748;
  line-height: 1.65;
  font-weight: normal;
  margin-bottom: 14px;
}

.cca-elm-memb-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.65;
  font-weight: normal;
  margin-bottom: 14px;
}

.cca-elm-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cca-elm-levy-card .cca-elm-card-list li {
  font-size: 13.5px;
  color: #5C5748;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-weight: normal;
}

.cca-elm-memb-card .cca-elm-card-list li {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.70);
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-weight: normal;
}

.cca-elm-levy-card .cca-elm-card-list li i {
  color: #044283;
  font-size: 13px;
  margin-top: 3px;
  flex-shrink: 0;
}

.cca-elm-memb-card .cca-elm-card-list li i {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ── Compare note ── */
.cca-elm-compare-note {
  margin-top: 16px;
  background: #ffffff;
  border: 1px solid #E4DCC9;
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cca-elm-compare-note i {
  color: #044283;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.cca-elm-compare-note p {
  font-size: 13.5px;
  color: #5C5748;
  line-height: 1.6;
  font-weight: normal;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .cca-elm-covers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .cca-elm-update-inner {
    grid-template-columns: 1fr;
  }
  .cca-elm-update-photo {
    border-left: none;
    border-top: 1px solid #E4DCC9;
    min-height: 220px;
  }
  .cca-elm-stats-row {
    grid-template-columns: 1fr;
  }
  .cca-elm-compare-row {
    grid-template-columns: 1fr;
  }
  .cca-elm-covers-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .cca-elm-section {
    padding: 28px 20px 56px;
  }
  .cca-elm-update {
    padding: 22px 20px;
  }
  .cca-elm-covers-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   SENIORS EVENTS PAGE — .cca-seniors-*
   Append to user.css. Page-scoped; nothing here is shared.
   ============================================================ */

.cca-seniors-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}

.cca-seniors-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}

/* ---- Left column ---- */

.cca-seniors-poster {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #E4DCC9;
  box-shadow: 0 10px 30px -12px rgba(17, 40, 85, 0.25);
}

.cca-seniors-poster img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.cca-seniors-upcoming {
  margin-top: 20px;
  background: #FFFFFF;
  border: 1px solid #E4DCC9;
  border-radius: 14px;
  padding: 22px 24px;
}

.cca-seniors-upcoming h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #112855;
  margin: 0 0 12px;
}

.cca-seniors-upcoming p {
  font-size: 15px;
  color: #5C5748;
  line-height: 1.65;
  margin: 0 0 16px;
  font-weight: normal;
}

.cca-seniors-upcoming-link,
.cca-seniors-upcoming-link:link,
.cca-seniors-upcoming-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #044283;
  text-decoration: none;
  border-bottom: 1px solid rgba(4, 66, 131, 0.35);
  padding-bottom: 2px;
}

.cca-seniors-upcoming-link:hover,
.cca-seniors-upcoming-link:active {
  color: #112855;
  border-bottom-color: #112855;
}

.cca-seniors-upcoming-rule {
  border: 0;
  border-top: 1px solid #E4DCC9;
  margin: 20px 0 16px;
}

.cca-seniors-meta-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: #221F1A;
  font-weight: normal;
  line-height: 1.55;
}

.cca-seniors-meta-row i.fa-solid {
  flex-shrink: 0;
  margin-top: 3px;
  color: #044283;
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.cca-seniors-meta-row b {
  font-weight: 600;
}

/* ---- Right column ---- */

.cca-seniors-subeyebrow {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #044283;
  margin-bottom: 10px;
}

.cca-seniors-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 25px;
  color: #112855;
  margin: 0 0 14px;
}

.cca-seniors-body p {
  margin: 0 0 18px;
  color: #5C5748;
  font-size: 17px;
  line-height: 1.75;
  max-width: 62ch;
  font-weight: normal;
}

.cca-seniors-body strong {
  color: #221F1A;
}

.cca-seniors-cta-wrap {
  margin: 28px 0 0;
}

/* ---- Stat band — matches the grey panel on the Memberships page ---- */

.cca-seniors-stats {
  background: #DFDFDF;
  border-radius: 14px;
  padding: 26px 28px;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cca-seniors-stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  color: #112855;
  line-height: 1;
  margin-bottom: 8px;
}

.cca-seniors-stat-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5C5748;
  line-height: 1.5;
}

.cca-seniors-sponsor-lead {
  margin-top: 40px;
}

/* ---- Responsive ---- */

@media (max-width: 820px) {
  .cca-seniors-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cca-seniors-section {
    padding: 28px 20px 56px;
  }
  .cca-seniors-stats {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   SHARED COMPONENT — .cca-sponsor-*
   Reusable sponsor logo grid. Used on the Seniors Events page
   and on individual event pages. Add ONCE; do not duplicate
   inside any page-scoped section.
   ============================================================ */

.cca-sponsor-section {
  border-top: 1px solid #E4DCC9;
  padding-top: 20px;
  margin-top: 24px;
}

.cca-sponsor-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #112855;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.cca-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
  justify-content: center;
  gap: 16px;
}

.cca-sponsor-card,
.cca-sponsor-card:link,
.cca-sponsor-card:visited {
  display: block;
  border: 1px solid #E4DCC9;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.cca-sponsor-logo {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: #FFFFFF;
}

.cca-sponsor-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.cca-sponsor-link {
  display: block;
  padding: 8px 12px;
  border-top: 1px solid #E4DCC9;
  background: #F7F3EA;
  text-align: center;
  font-size: 11.5px;
  color: #5C5748;
}

/* Optional tier label — add the is-presenting class and the label
   span only when tiering is needed for that event. */

.cca-sponsor-card.is-presenting {
  border-color: #044283;
}

.cca-sponsor-tier-label {
  display: block;
  padding: 4px 10px;
  background: #044283;
  color: #FFFFFF;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
/* ============================================================
   CITADEL — Pilates Class page
   Add this entire block to the bottom of user.css.

   Path: System → Site Templates → Cassiopeia Details and Files
         → css → user.css

   REQUIRES (already in user.css, not redeclared here):
   - .cca-page-banner / .cca-eyebrow / .cca-banner-lead
   - --cca-navy-900 / --cca-navy-700 / --cca-navy-600 /
     --cca-ink-900 / --cca-ink-600 / --cca-line CSS variables
   - .cca-btn-navy (shared sitewide CTA button)
   - Font Awesome 6 in the template <head>

   Layout matches the Yoga Class page: poster image in a
   fixed-width left column, class description on the right, with
   a schedule details card under the poster. Single-section —
   no instructor block until a bio is available.

   Only .cca-pilates- prefixed rules are new below.
   ============================================================ */

.cca-pilates-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}

.cca-pilates-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}

/* --- Left column: poster + details card --- */
.cca-pilates-poster {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(17, 40, 85, 0.25);
  border: 1px solid var(--cca-line);
  display: block;
  width: 100%;
}

.cca-pilates-meta {
  margin-top: 20px;
  background: #ffffff;
  border: 1px solid var(--cca-line);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cca-pilates-meta-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--cca-ink-900);
  font-weight: normal;
  line-height: 1.5;
}

.cca-pilates-meta-row i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cca-navy-700);
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.cca-pilates-meta-row b {
  font-weight: 600;
}

.cca-pilates-meta-divider {
  border-top: 1px solid var(--cca-line);
  margin: 2px 0;
}

/* --- Right column: description --- */
.cca-pilates-subeyebrow {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cca-navy-700);
  margin-bottom: 10px;
}

.cca-pilates-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--cca-navy-900);
  margin: 0 0 14px;
}

.cca-pilates-body .cca-pilates-subhead {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cca-navy-700);
  margin: 0 0 16px;
}

.cca-pilates-body p {
  margin: 0 0 18px;
  color: var(--cca-ink-600);
  font-size: 16px;
  max-width: 62ch;
  font-weight: normal;
  line-height: 1.7;
}

.cca-pilates-body p:last-of-type {
  margin-bottom: 0;
}

.cca-pilates-cta-wrap {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .cca-pilates-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cca-page-banner {
    padding: 28px 20px 24px;
  }
  .cca-pilates-section {
    padding: 28px 20px 56px;
  }
}

/* --- Divider between class info + instructor --- */
.cca-pilates-divider {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.cca-pilates-divider hr {
  border: none;
  border-top: 1px solid var(--cca-line);
  margin: 0 0 48px;
}

/* --- Instructor section — full width below the class info --- */
.cca-pilates-instructor {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px 72px;
}

.cca-pilates-instr-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--cca-navy-900);
  margin: 0 0 4px;
}

.cca-pilates-instr-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cca-navy-700);
  margin: 0 0 16px;
}

.cca-pilates-instr-bio p {
  font-size: 15.5px;
  color: var(--cca-ink-600);
  line-height: 1.7;
  max-width: 68ch;
  margin: 0 0 14px;
  font-weight: normal;
}

.cca-pilates-instr-bio p:last-child {
  margin-bottom: 0;
}

.cca-pilates-instr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.cca-pilates-instr-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(17, 40, 85, .08);
  color: var(--cca-navy-700);
  padding: 5px 11px;
  border-radius: 999px;
}
/* =========================================================
   SITE-WIDE ALERT BANNER — .cca-alert-banner
   Shared component (like .cca-btn-navy) — used by a Custom
   HTML module, not an article. Reusable for future notices;
   only the module's text content changes, this CSS doesn't.
   Outside .board-section, so literal hex only, no var().
   ========================================================= */

.cca-alert-banner {
  background: #FCE9D8;
  border-bottom: 3px solid #B5580E;
  font-family: 'Inter', -apple-system, sans-serif;
  max-width: 1275px;
  margin: 0 auto;
}

.cca-alert-header {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cca-alert-icon {
  color: #B5580E;
  font-size: 20px;
  flex-shrink: 0;
}

.cca-alert-title {
  margin: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #5A2E05;
  line-height: 1.4;
}

.cca-alert-title .cca-alert-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: #B5580E;
  margin-right: 8px;
}

.cca-alert-toggle {
  background: none;
  border: none;
  color: #5A2E05;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  flex-shrink: 0;
  font-family: inherit;
}
.cca-alert-toggle:hover { background: rgba(90, 46, 5, 0.08); }
.cca-alert-toggle:focus-visible { outline: 2px solid #B5580E; outline-offset: 2px; }

.cca-alert-body {
  padding: 0 24px 16px 58px;
}
.cca-alert-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #5A2E05;
  font-weight: normal; /* overrides sitewide bold <p> rule */
}
.cca-alert-body.is-collapsed { display: none; }

@media (max-width: 600px) {
  .cca-alert-header { padding: 12px 16px; gap: 10px; }
  .cca-alert-body { padding: 0 16px 14px 44px; }
  .cca-alert-toggle .cca-alert-toggle-text { display: none; }
}