/* ==========================================================================
   Date: 21-Jul-2026
   Version: v4.1 (Integrated Master - Restored 3-Card Grid System)
   ========================================================================== */

/* ==========================================================================
   A. GLOBAL CONFIGURATIONS & RESETS
   ========================================================================== */
body {
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
  font-family: 'Lato', Arial, sans-serif;
  color: #334155;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, span {
  margin: 0;
  padding: 0;
}

.t4-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ==========================================================================
   B. THE BRANDING HEADER ROW (SOFT MIST BLUE & CENTERED)
   ========================================================================== */
#t4-header,
.t4-section-header,
.t4-header.header-3 {
  background-color: #E0F2FE !important; /* Vibrant Light Sky Blue */
  border: none !important;
  width: 100% !important;
  padding: 0 !important;
}

.club-branding-flex-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Centers branding horizontally */
  gap: 25px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 15px 20px !important;
  box-sizing: border-box !important;
}

.logo-flex-cell {
  width: 120px !important;
  height: 120px !important;
  flex-shrink: 0 !important;
}

.logo-flex-cell img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

.text-flex-cell {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.club-main-title {
  display: block !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important; /* Heavy Bold */
  color: #0044FF !important; /* Vibrant Royal Blue */
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  letter-spacing: -0.2px !important;
}

.club-slogan {
  display: block !important;
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #EA2839 !important; /* Mauritian Flag Red */
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

.club-est {
  display: block !important;
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: #475569 !important; /* Darker Slate Grey */
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

.mauritian-flag-ribbon {
  display: flex !important;
  width: 100% !important;
  height: 7px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.flag-stripe { flex: 1 !important; height: 100% !important; }
.stripe-red { background-color: #EA2839 !important; }
.stripe-blue { background-color: #0044FF !important; }
.stripe-yellow { background-color: #FFD500 !important; }
.stripe-green { background-color: #00A551 !important; }

/* ==========================================================================
   C. THE NAVIGATION ROW (DEEP BRANDING NAVY BACKGROUND)
   ========================================================================== */
.t4-section-navigation {
  background-color: #1A206D !important; /* Deep Branding Navy */
  border-bottom: 3px solid #111547 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ==========================================================================
   D. NATIVE BOOTSTRAP DROPDOWN SUB-MENUS (PURE WHITE BACKGROUND)
   ========================================================================== */
.navbar-nav .dropdown-menu,
.t4-mainnav .dropdown-menu {
  background-color: #FFFFFF !important; /* Pure White dropdown panels */
  border: 2px solid #0284C7 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(2, 132, 199, 0.15) !important;
  padding: 8px 0 !important;
}

.navbar-nav .dropdown-menu a,
.navbar-nav .dropdown-menu .dropdown-item,
.t4-mainnav .dropdown-menu a {
  color: #334155 !important; /* Dark reading charcoal */
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 25px !important;
  display: block !important;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out !important;
}

.navbar-nav .dropdown-menu a:hover,
.navbar-nav .dropdown-menu .dropdown-item:hover,
.t4-mainnav .dropdown-menu a:hover {
  background-color: #0284C7 !important; /* Sky Ocean Blue on hover */
  color: #FFFFFF !important;
}

/* ==========================================================================
   E. GAP REMOVAL: SYSTEM & CONTAINER SPACE COLLAPSER
   ========================================================================== */
.t4-main-body,
#t4-main-body,
.t4-main-body-inner,
.t4-section-inner,
.club-main-content-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
  gap: 0 !important;
}

main#t4-content,
.t4-content,
div[itemprop="mainEntityOfPage"],
.com_content,
.com-content-article {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#system-message-container,
.t4-message {
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
}

/* ==========================================================================
   F. FAIL-SAFE CONTENT CONSTRAINED CRIMSON HEADER & SUBTITLE
   ========================================================================== */
.inner-page-header-row,
.inner-page-header-container,
.inner-page-main-title,
.inner-page-subtitle {
  display: block !important;
}

.inner-page-header-row {
  width: 100% !important;
  max-width: 100% !important;
  background-color: transparent !important;
  border: none !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

.inner-page-header-container {

position: relative !important;
  top: -16px !important; /* <--- Shifts the box 20px upward */

  /* existing style */
  width: 100% !important;
  max-width: 100% !important;
  background-color: #9C0052 !important; /* Deep Berry Crimson box */
  border-bottom: 3px solid #7a0040 !important; /* Burgundy baseline shadow */
  border-radius: 0px !important;
  box-sizing: border-box !important;
  padding: 20px 25px !important; 
  margin-top: 0 !important; 
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 15px !important;
}

.inner-page-main-title {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  text-align: left !important;
  border: none !important;
  padding: 0 !important;
}

.inner-page-subtitle,
.inner-page-header-row span.inner-page-subtitle {
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #FED7E2 !important; /* Pale Blush Pink */
  margin: 0 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}

.inner-page-header-row hr,
.inner-page-header-row::after,
.inner-page-header-row::before,
.inner-page-main-title::after,
.inner-page-subtitle::after,
.page-header::after,
.com_content .item-page::before,
.t4-masthead,
#t4-masthead,
.t4-section-masthead {
  display: none !important;
  border: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  content: none !important;
}

/* ==========================================================================
   G. CORE CONTENT TYPOGRAPHY
   ========================================================================== */
.club-main-content-section h1,
.club-main-content-section h2,
.section-main-heading {
  color: #1A206D !important; /* Deep Navy Blue Headings */
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
}

.club-main-content-section h3,
.card-inside-title {
  color: #0044FF !important; /* Royal Blue Subheadings */
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
}

.club-main-content-section p,
.section-description-text {
  color: #334155 !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   H. MOBILE RESPONSIVE MEDIA BREAKPOINTS
   ========================================================================== */
@media (max-width: 768px) {
  .club-branding-flex-container {
    flex-direction: column !important; 
    gap: 15px !important;
    padding: 20px !important;
  }
  .text-flex-cell { gap: 4px !important; }
  .club-main-title { font-size: 20px !important; white-space: normal !important; margin: 0 !important; }
  .club-slogan { font-size: 14px !important; margin: 0 !important; }
  .club-est { margin: 0 0 2px 0 !important; }
  .mauritian-flag-ribbon { width: 140px !important; height: 6px !important; }

  .inner-page-header-row { padding: 20px !important; text-align: center !important; }
  .inner-page-header-container { padding: 15px 20px !important; margin-bottom: 20px !important; }
  .inner-page-main-title { font-size: 22px !important; text-align: center !important; }
  .inner-page-subtitle,
  .inner-page-header-row span.inner-page-subtitle { font-size: 13.5px !important; text-align: center !important; }
}

/* ==========================================================================
   I. EXECUTIVE COMMITTEE GRID LAYOUT & CARD DESIGNS
   ========================================================================== */
.committee-intro-wrapper {
  margin-bottom: 35px;
}

.committee-intro-wrapper h2 {
  margin-bottom: 12px !important;
}

.committee-grid-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important; 
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 40px !important;
}

.committee-profile-card {
  background-color: #FFFFFF !important; 
  border: 1px solid #E2E8F0 !important; 
  border-bottom: 3px solid #0044FF !important; 
  border-radius: 0 !important; 
  padding: 25px 20px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.committee-profile-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 20px rgba(0, 68, 255, 0.08) !important;
  border-bottom: 3px solid #EA2839 !important; 
}

.profile-avatar-placeholder {
  width: 90px !important;
  height: 90px !important;
  background-color: #F1F5F9 !important; 
  border: 2px solid #E2E8F0 !important;
  border-radius: 50% !important; 
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 15px !important;
}

.avatar-initials {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #64748B !important;
}

.profile-text-body {
  width: 100% !important;
}

.member-name {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important; 
  color: #1A206D !important; 
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
}

.member-role {
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #EA2839 !important; 
  margin: 0 0 15px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.member-contact-divider {
  width: 50px !important;
  height: 2px !important;
  background-color: #E2E8F0 !important;
  margin: 0 auto 15px auto !important;
}

.member-contact {
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #475569 !important; 
  margin-bottom: 2px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

@media (max-width: 992px) {
  .committee-grid-row {
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  .committee-grid-row {
    grid-template-columns: 1fr !important; 
    gap: 20px !important;
  }
  .committee-profile-card {
    padding: 20px 15px !important;
  }
}

/* ==========================================================================
   J. CLUB HISTORY, TIMELINE & ABOUT US PILLARS
   ========================================================================== */
.history-intro-narrative, .about-hero-intro-panel {
  margin-bottom: 40px;
}

.history-intro-narrative h2, .about-hero-intro-panel h2 {
  margin-bottom: 15px !important;
}

.about-lead-text {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1A206D !important; 
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

.history-timeline-wrapper {
  position: relative !important;
  margin-bottom: 45px !important;
  padding-left: 20px !important;
  border-left: 4px solid #0284C7 !important; 
}

.timeline-milestone-card {
  position: relative !important;
  margin-bottom: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.timeline-milestone-card:last-child {
  margin-bottom: 0 !important;
}

.milestone-year-badge {
  background-color: #0284C7 !important; 
  color: #FFFFFF !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 4px 14px !important;
  border-radius: 4px !important; 
  margin-bottom: 12px !important;
  letter-spacing: 0.5px !important;
}

.milestone-content-box {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 4px solid #9C0052 !important; 
  padding: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.milestone-content-box h3 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 18px !important;
  color: #1A206D !important; 
  margin-bottom: 8px !important;
  font-weight: 700 !important;
}

.history-objectives-callout {
  background-color: #E0F2FE !important; 
  border-left: 5px solid #0044FF !important; 
  padding: 30px !important;
  margin-bottom: 45px !important;
  box-sizing: border-box !important;
}

.history-objectives-callout h3 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 21px !important;
  color: #1A206D !important;
  margin-bottom: 12px !important;
  font-weight: 700 !important;
}

.objectives-accent-divider {
  width: 60px !important;
  height: 3px !important;
  background-color: #EA2839 !important; 
  margin-bottom: 20px !important;
}

.objectives-bullet-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.objectives-bullet-list li {
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 16px !important;
  color: #334155 !important;
  line-height: 1.6 !important;
  margin-bottom: 14px !important;
  position: relative !important;
  padding-left: 25px !important;
}

.objectives-bullet-list li:last-child {
  margin-bottom: 0 !important;
}

.objectives-bullet-list li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: #00A551 !important; 
  font-weight: 900 !important;
}

.history-split-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; 
  gap: 35px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 40px !important;
}

.history-split-column-box {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  padding: 25px !important;
  box-sizing: border-box !important;
}

.history-split-column-box h3 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 20px !important;
  color: #1A206D !important;
  margin-bottom: 20px !important;
  font-weight: 700 !important;
}

.event-mini-row {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.event-mini-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.event-date-stamp {
  background-color: #9C0052 !important; 
  color: #FFFFFF !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  text-align: center !important;
  min-width: 95px !important;
  box-sizing: border-box !important;
}

.event-details-text {
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  color: #475569 !important;
}

.about-pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; 
  gap: 30px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 45px !important;
}

.about-pillar-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-bottom: 3px solid #0284C7 !important; 
  padding: 30px 25px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.about-pillar-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px rgba(2, 132, 199, 0.08) !important;
  border-bottom: 3px solid #9C0052 !important; 
}

.pillar-icon-box {
  font-size: 32px !important;
  margin-bottom: 15px !important;
  line-height: 1 !important;
}

.about-pillar-card h3 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #1A206D !important;
  margin-bottom: 12px !important;
}

.about-pillar-card p {
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  margin: 0 !important;
}

.about-join-cta-box {
  background-color: #E0F2FE !important; 
  border-left: 5px solid #0044FF !important; 
  padding: 30px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  margin-bottom: 40px !important;
}

.about-join-cta-box h3 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 22px !important;
  color: #1A206D !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.about-join-cta-box p {
  margin-bottom: 20px !important;
}

.about-primary-btn {
  display: inline-block !important;
  background-color: #EA2839 !important; 
  color: #FFFFFF !important;
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
  transition: opacity 0.15s ease-in-out !important;
}

.about-primary-btn:hover {
  opacity: 0.9 !important;
}

@media (max-width: 992px) {
  .about-pillars-grid {
    grid-template-columns: 1fr !important; 
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  .history-split-grid {
    grid-template-columns: 1fr !important; 
    gap: 25px !important;
  }
}

/* ==========================================================================
   K. FORCE CLUB M TORONTO DYNAMIC HOME CONTENT BLOCKS
   ========================================================================== */
.alert-banner-position, .events-grid {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.alert-banner-position {
    display: block !important;
    margin: 0 0 35px 0 !important; 
}

.alert-banner-position .newsflash,
.alert-banner-position ul,
.alert-banner-position div.mod-articles,
.alert-banner-position .mod-articles-category {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.alert-banner-position li,
.alert-banner-position .mod-articles-item,
.alert-banner-position .mod-articles-category-item {
    background-color: #FEF2F2 !important; 
    border-left: 6px solid #EF4444 !important; 
    padding: 22px 25px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.08) !important;
    display: block !important;
}

.alert-banner-position h1, .alert-banner-position h2,
.alert-banner-position h3, .alert-banner-position h4,
.alert-banner-position h5, .alert-banner-position a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    color: #991B1B !important; 
    text-decoration: none !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.alert-banner-position p, .alert-banner-position span,
.alert-banner-position .mod-articles-category-introtext {
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
    color: #7F1D1D !important; 
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* RESTORED VERSION 4.1: 3-COLUMN CARD GRID FOR EVENTS & NEWS */
.events-grid .newsflash,
.events-grid ul,
.events-grid div.mod-articles,
.events-grid .mod-articles-category {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 25px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

.events-grid li,
.events-grid .mod-articles-item,
.events-grid .mod-articles-category-item {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    padding: 25px !important;
    border-top: 4px solid #0044FF !important; 
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: block !important;
}

.events-grid li:hover,
.events-grid .mod-articles-item:hover,
.events-grid .mod-articles-category-item:hover {
    transform: translateY(-5px) !important;
}

.events-grid h1, .events-grid h2,
.events-grid h3, .events-grid h4,
.events-grid h5, .events-grid a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 21px !important;
    color: #111827 !important;
    text-decoration: none !important;
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.events-grid h1:hover, .events-grid h2:hover,
.events-grid h3:hover, .events-grid h4:hover,
.events-grid h5:hover, .events-grid a:hover {
    color: #0044FF !important;
}

.events-grid p, .events-grid span,
.events-grid .mod-articles-category-introtext {
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
    color: #4B5563 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ==========================================================================
   L. HOME ALERT ROW (ZERO GAP / URGENT RED THEME)
   ========================================================================== */
#t4-home-alert-row,
.t4-home-alert-row,
section#t4-home-alert-row {
    background: transparent !important;
    border: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#t4-home-alert-row .t4-section-inner,
#t4-home-alert-row .t4-section-inner.container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#t4-home-alert-row ul.mod-articles-items,
.t4-home-alert-row ul.mod-articles-items {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding: 18px 22px !important;
    background-color: #FEF2F2 !important;
    border: 1px dashed #FCA5A5 !important;
    border-left: 6px solid #DC2626 !important;
    border-radius: 6px !important;
}

#t4-home-alert-row ul.mod-articles-items li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#t4-home-alert-row .mod-articles-category-date {
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #991B1B !important;
    background-color: #FDE8E8 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#t4-home-alert-row .mod-articles-category-title,
#t4-home-alert-row ul.mod-articles-items h4,
#t4-home-alert-row ul.mod-articles-items h3 {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #991B1B !important;
    text-decoration: none !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}

#t4-home-alert-row ul.mod-articles-items p {
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
    color: #7F1D1D !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#t4-home-alert-row ul.mod-articles-items p::before {
    content: "📢 NOTICE: ";
    font-weight: 800 !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #991B1B !important;
    margin-right: 4px !important;
}

#t4-home-alert-row ul.mod-articles-items strong,
#t4-home-alert-row ul.mod-articles-items b {
    color: #991B1B !important;
    font-weight: 700 !important;
    background-color: #FDE8E8 !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
}

#t4-home-alert-row ul.mod-articles-items ul {
    margin: 8px 0 !important;
    padding-left: 20px !important;
}

#t4-home-alert-row ul.mod-articles-items ul li {
    color: #7F1D1D !important;
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

#t4-home-alert-row ul.mod-articles-items p a {
    display: inline-block !important;
    margin-top: 6px !important;
    padding: 4px 12px !important;
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
}

#t4-home-alert-row ul.mod-articles-items p a:hover {
    background-color: #991B1B !important;
}

/* ==========================================================================
   WEEKLY SPORTS SCHEDULE DATA TABLES
   ========================================================================== */
.schedule-intro-panel {
    background-color: #F9FAFB !important;
    border-left: 4px solid #9C0052 !important; 
    padding: 20px !important;
    margin: 30px 0 45px 0 !important;
    border-radius: 0 4px 4px 0;
}

.schedule-alert-text {
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
}

.season-title {
    font-family: 'Oswald', sans-serif !important;
    font-size: 24px !important;
    color: #000000 !important;
    margin: 40px 0 20px 0 !important;
    border-bottom: 2px solid #E5E7EB !important;
    padding-bottom: 8px !important;
}

.schedule-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 30px !important;
    background-color: #FFFFFF !important;
}

.schedule-table th {
    background-color: #111111 !important; 
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    padding: 14px 16px !important;
    text-align: left !important;
    border: 1px solid #111111 !important;
}

.schedule-table td {
    padding: 16px !important;
    border: 1px solid #E5E7EB !important; 
    vertical-align: top !important;
    font-size: 14px !important;
    color: #111111 !important;
}

.schedule-table .day-cell,
.schedule-table .date-cell,
.schedule-table .time-cell {
    text-align: center !important;
    vertical-align: middle !important;
}

.map-link {
    display: block !important;
    font-weight: 600 !important;
    color: #9C0052 !important; 
    text-decoration: none !important;
    margin-bottom: 4px !important;
}

.map-link:hover {
    text-decoration: underline !important;
    color: #000000 !important;
}

.address-text {
    display: block !important;
    color: #4B5563 !important;
}

.directions-hint {
    display: block !important;
    font-size: 12px !important;
    color: #6B7280 !important;
    margin-top: 4px !important;
    font-style: italic !important;
}

.activity-list {
    margin: 0 !important;
    padding-left: 20px !important;
}

.activity-list li {
    margin-bottom: 6px !important;
}

.activity-list.styled-times li {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: -20px !important;
    border-bottom: 1px dashed #F3F4F6 !important;
    padding-bottom: 4px !important;
}

.activity-list.styled-times li:last-child {
    border-bottom: none !important;
}

.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ==========================================================================
   M. MEMBERSHIP TABLES & DEFINITIONS LAYOUT
   ========================================================================== */
.membership-page-wrapper {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto 45px auto !important;
  box-sizing: border-box !important;
}

.membership-table-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1A206D !important;
  margin: 35px 0 15px 0 !important;
  border-bottom: 2px solid #E2E8F0 !important;
  padding-bottom: 8px !important;
}

.membership-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 30px !important;
  background-color: #FFFFFF !important;
}

.membership-table th {
  background-color: #111111 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  padding: 14px 16px !important;
  text-align: left !important;
  border: 1px solid #111111 !important;
}

.membership-table td {
  padding: 16px !important;
  border: 1px solid #E5E7EB !important;
  vertical-align: middle !important;
  font-size: 14.5px !important;
  color: #111111 !important;
}

.membership-table .fee-cell {
  font-weight: 700 !important;
  color: #0044FF !important;
  white-space: nowrap !important;
}

.membership-table ul {
  margin: 0 !important;
  padding-left: 20px !important;
}

.membership-table li {
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
}

.membership-table li:last-child {
  margin-bottom: 0 !important;
}

.membership-activities-footer {
  background-color: #E0F2FE !important;
  border-left: 5px solid #0044FF !important;
  padding: 25px !important;
  margin-top: 25px !important;
  box-sizing: border-box !important;
}

.membership-activities-footer h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1A206D !important;
  margin-bottom: 10px !important;
}

/* ==========================================================================
   N. HOMEPAGE WEEKLY WELLNESS GRID (ROW 5)
   ========================================================================== */
.home-wellness-section {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 40px auto 20px auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

.home-wellness-section h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1A206D !important;
  margin-bottom: 25px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.wellness-grid-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.wellness-grid-table th {
  background-color: #1A206D !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  padding: 15px !important;
  letter-spacing: 0.05em !important;
}

.wellness-grid-table td {
  padding: 15px !important;
  border: 1px solid #E2E8F0 !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 14px !important;
  color: #334155 !important;
  vertical-align: top !important;
}

.wellness-grid-table tr:nth-child(even) {
  background-color: #F8FAFC !important;
}

.wellness-day-badge {
  font-weight: 700 !important;
  color: #111111 !important;
  font-size: 16px !important;
  display: block !important;
}

.wellness-grid-table ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wellness-grid-table li {
  padding: 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

@media (max-width: 768px) {
  .wellness-grid-table, .wellness-grid-table thead, .wellness-grid-table tbody, .wellness-grid-table th, .wellness-grid-table td, .wellness-grid-table tr {
    display: block !important;
    width: 100% !important;
  }
  .wellness-grid-table thead { display: none !important; }
  .wellness-grid-table td {
    border: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 12px 15px !important;
  }
  .wellness-grid-table tr {
    margin-bottom: 15px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
  }
}

/* ==========================================================================
   HOMEPAGE MODULES (ROWS 1 TO 6) & LAYOUT ADJUSTMENTS
   ========================================================================== */
.hero-masthead-section {
  background-color: #E0F2FE !important;
  padding: 60px 0 !important;
  width: 100% !important;
}

.hero-slogan-badge {
  display: inline-block !important;
  font-size: 16px !important;
  margin-bottom: 15px !important;
}

.hero-main-title {
  font-size: 42px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  margin-bottom: 20px !important;
}

.hero-description-container {
  max-width: 800px !important;
  margin: 0 auto !important;
}

.hero-description-text {
  font-size: 18px !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  margin-bottom: 30px !important;
  color: #334155 !important;
}

.hero-actions-wrapper {
  display: flex !important;
  gap: 15px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.hero-btn-green {
  border-radius: 4px !important;
  background-color: #00A551 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(0, 165, 81, 0.25) !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 12px 24px !important;
}

.pillars-section-wrapper {
  background-color: #F8FAFC !important;
  border: 1px dashed #CBD5E1 !important;
  padding: 30px 0 !important;
  width: 100% !important;
}

.pillars-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

.pillars-title-header {
  text-align: center !important;
  margin-bottom: 50px !important;
}

.pillars-main-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #1A206D !important;
  margin-bottom: 15px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pillars-accent-line {
  width: 60px;
  height: 4px;
  background-color: #00A551;
  margin: 0 auto !important;
  border-radius: 2px;
}

.pillars-card-grid {
  display: flex !important;
  gap: 30px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.pillar-card-box {
  flex: 1 1 300px !important;
  max-width: 360px !important;
  background: #F8FAFC !important;
  padding: 30px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
  text-align: center !important;
  box-sizing: border-box;
}

.pillar-card-box.border-red { border-top: 4px solid #EA2839 !important; }
.pillar-card-box.border-green { border-top: 4px solid #00A551 !important; }
.pillar-card-box.border-yellow { border-top: 4px solid #FFC72C !important; }

.pillar-icon {
  font-size: 40px !important;
  margin-bottom: 15px !important;
}

.pillar-card-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1A206D !important;
  margin-bottom: 12px !important;
}

.pillar-card-text {
  font-family: 'Lato', sans-serif !important;
  font-size: 15px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
/* 1. Make the outer wrapper stretch full-width (100%) */
.activities-section-wrapper {
  background-color: #F0F9FF !important;
  border-top: 1px dashed #BAE6FD !important;
  border-bottom: 1px dashed #BAE6FD !important;
  width: 100% !important;
  margin: 40px 0 !important;
  padding: 30px 0 !important;
  box-sizing: border-box !important;
}

/* 2. Constrain the inner grid to 1200px and center it */
.activities-grid-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 25px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/*
.activities-section-wrapper {
  background-color: #F0F9FF !important;
  border: 1px dashed #BAE6FD !important;
  width: 100% !important;
  max-width: 1200px !important;
  */
 /* margin: 40px auto !important; */
/*
  margin: 10px auto !important;
  */
/*  padding: 30px 20px !important; */
/*
  padding: 0px 0px !important;
  box-sizing: border-box !important;
}
*/
/*
.activities-grid-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 25px !important;
  margin-bottom: 35px !important;
  width: 100% !important;
}
*/

@media (max-width: 768px) {
  .activities-grid-container {
    grid-template-columns: 1fr !important;
  }
}

.activity-card {
  background-color: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  padding: 30px !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.activity-card.blue-accent { border-left: 5px solid #0044FF !important; }
.activity-card.green-accent { border-left: 5px solid #00A551 !important; }

.site-footer-wrapper {
  background-color: #0F172A !important;
  color: #94A3B8 !important;
  font-family: 'Lato', sans-serif !important;
  padding: 60px 0 30px 0 !important;
  width: 100% !important;
  border-top: 4px solid #1A206D !important;
  box-sizing: border-box !important;
}

.site-footer-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

.site-footer-grid {
  display: flex !important;
  gap: 40px !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  margin-bottom: 40px !important;
}

.footer-col-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 20px 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-footer-wrapper a {
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.site-footer-wrapper a:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   HOMEPAGE ALERT OVERRIDES & GRID BOUNDARIES
   ========================================================================== */
html body #t4-main-body .home-alert-row,
html body .home-alert-row,
div[class*="home-alert-row"] {
    background-color: #E0F2FE !important;
    background: #E0F2FE !important;
    border: 1px dashed #7DD3FC !important;
    border-left: 6px solid #0044FF !important;
    border-radius: 4px !important;
    padding: 20px 25px !important;
    margin: 25px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.alert-bar h1, .alert-bar h2, .alert-bar h3, .alert-bar h4, .alert-bar a,
.home-alert-row h1, .home-alert-row h2, .home-alert-row h3, .home-alert-row h4, .home-alert-row a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    color: #0369A1 !important; 
    text-decoration: none !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.alert-bar p, .alert-bar span, .alert-bar .mod-articles-category-introtext,
.home-alert-row p, .home-alert-row span, .home-alert-row .mod-articles-category-introtext {
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
    color: #0F172A !important; 
    line-height: 1.6 !important;
    margin: 0 !important;
    display: block !important;
}

/* ==========================================================================
   SECTION O: NATIVE FLEXBOX AUTO-EXPAND (3-Col, 100% 4th, 50/50 5th)
   ========================================================================== */

/* 1. Set container to Flexbox with wrapping allowed */
.events-grid ul,
.events-grid-container ul,
.mod-articles,
ul.mod-articles {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2. Set individual item rules */
.events-grid ul > li,
.events-grid-container ul > li,
.mod-articles > li {
  /* Initial target width is ~30% so 3 items fit on Row 1 */
  flex-basis: calc(33.333% - 1.5rem) !important;
  
  /* ALLOW ITEMS TO GROW TO FILL REMAINING ROW SPACE */
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  
  min-width: 280px !important; /* Forces row wrap on smaller screens */
  box-sizing: border-box !important;
}

/* Ensure inner Joomla card wrappers fill full height of the expanded box */
.mod-articles > li > article,
.mod-articles > li > article > .mod-articles-item-content {
  height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   HOMEPAGE FAQ ACCORDION SECTION (STATIC)
   ========================================================================== */

.faq-section-wrapper {
  background-color: #ffffff !important;
  padding: 60px 20px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.faq-section-title {
  font-family: 'Montserrat', sans-serif !important;
  color: #1A206D !important; /* Dark Navy branding */
  font-weight: 700 !important;
  font-size: 28px !important;
  text-align: center !important;
  margin-bottom: 35px !important;
}

/* Accordion Item Container */
.faq-accordion-item {
  border: 1px solid #BAE6FD !important; /* Sky Blue accent border */
  border-radius: 6px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  background-color: #F0F9FF !important; /* Soft Iceberg Blue */
  transition: all 0.2s ease-in-out !important;
}

.faq-accordion-item:hover {
  border-color: #1A206D !important; /* Darkens border on hover */
}

/* Question / Header Styling */
.faq-accordion-header {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  color: #1A206D !important;
  padding: 18px 24px !important;
  cursor: pointer !important;
  list-style: none !important; /* Removes default disclosure triangle */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  user-select: none !important;
}

/* Custom CSS + Icon for Expand/Collapse */
.faq-accordion-header::after {
  content: '+' !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #00A551 !important; /* Flag Green accent */
  transition: transform 0.2s ease !important;
  margin-left: 15px !important;
}

/* Open State Styling */
.faq-accordion-item[open] .faq-accordion-header::after {
  content: '−' !important;
  color: #7A0000 !important; /* Crimson Red accent when open */
}

.faq-accordion-item[open] {
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(26, 32, 109, 0.08) !important;
}

/* Answer / Body Content Styling */
.faq-accordion-body {
  font-family: 'Lato', sans-serif !important;
  font-size: 15px !important;
  color: #334155 !important;
  line-height: 1.6 !important;
  padding: 0 24px 22px 24px !important;
  border-top: 1px dashed #BAE6FD !important;
  margin-top: 5px !important;
  padding-top: 15px !important;
}

/* ==========================================================================
   CIVICRM MASTER CUSTOM STYLESHEET
   Designed for Joomla 5 & T4 Framework
   ========================================================================== */

/* ==========================================================================
   1. Page Title & Header Overrides
   ========================================================================== */

/* Eliminate potential template/wrapper borders, shadows, and lines */
div.page-header,
.page-header,
.t4-content-header,
.t4-page-title,
.crm-container .page-header,
.crm-title-ref,
.componentheading,
#crm-main-content-wrapper,
#crm-container {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
}

div.page-header::after,
div.page-header::before,
.t4-content-header::after,
.t4-content-header::before,
.crm-title-ref::after,
.crm-title-ref::before,
#crm-main-content-wrapper::after,
#crm-main-content-wrapper::before {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* Main Title Heading (Centered, 850px, Borderless) */
.crm-container h1,
.crm-container h2,
.crm-title,
.crm-event-id-title,
#crm-main-content-wrapper h1,
#crm-main-content-wrapper h2,
#crm-container h1,
#crm-container h2,
/* div.page-header h1,
div.page-header h2,
 .item-page h1, */
.componentheading {
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: #1e293b !important; /* Deep Slate Navy */
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.3 !important;
  text-align: left !important;
  border: none !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================
   2. Global Container & Typography Reset
   ========================================================================== */

.crm-container {
  font-family: inherit !important;
  color: #334155 !important;
  line-height: 1.6 !important;
}

.crm-container a {
  color: #0d6efd !important;
  text-decoration: none !important;
}

.crm-container a:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   3. Global Form Elements & Inputs
   ========================================================================== */

.crm-container input[type="text"],
.crm-container input[type="email"],
.crm-container input[type="tel"],
.crm-container select,
.crm-container textarea {
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.95rem !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.crm-container input[type="text"]:focus,
.crm-container input[type="email"]:focus,
.crm-container select:focus,
.crm-container textarea:focus {
  border-color: #0d6efd !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
}

/* ==========================================================================
   4. Tables & Data Grids
   ========================================================================== */

.crm-container table.row-highlight,
.crm-container table.selector {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 1.5rem !important;
}

.crm-container table.row-highlight th,
.crm-container table.selector th {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 2px solid #e2e8f0 !important;
  text-align: left !important;
}

.crm-container table.row-highlight td,
.crm-container table.selector td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* ==========================================================================
   5. System Status Messages & Alerts
   ========================================================================== */

.crm-container .messages,
.crm-container .crm-status {
  border-radius: 0.375rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.5rem !important;
  font-size: 0.95rem !important;
}

.crm-container .messages.status,
.crm-container .crm-status-success {
  background-color: #d1e7dd !important;
  border: 1px solid #badbcc !important;
  color: #0f5132 !important;
}

.crm-container .messages.error,
.crm-container .crm-status-error {
  background-color: #f8d7da !important;
  border: 1px solid #f5c2c7 !important;
  color: #842029 !important;
}

/* ==========================================================================
   6. Event Info / Summary Page Fine-Tuning (Centered Max-Width Layout)
   ========================================================================== */

/* Main Event Info Card Container (Centered, Max-Width 850px) */
.crm-container .crm-event-info-form-block,
.crm-container #event-info {
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 5px solid #0d6efd !important;
  border-radius: 0.5rem !important;
  padding: 1.5rem !important;
  margin-top: 1rem !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04) !important;
}

/* Row-by-Row Side-by-Side Flex Alignment */
.crm-container .crm-event-info-form-block .crm-section,
.crm-container #event-info .crm-section,
.crm-container .crm-event-info-form-block dl,
.crm-container #event-info dl {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  padding: 0.65rem 0 !important;
  border-bottom: 1px dashed #e2e8f0 !important;
  margin: 0 !important;
}

.crm-container .crm-event-info-form-block .crm-section:last-child,
.crm-container #event-info .crm-section:last-child {
  border-bottom: none !important;
}

/* Left Column: Fixed Width Labels */
.crm-container .crm-event-info-form-block .label,
.crm-container #event-info .label,
.crm-container .crm-event-info-form-block dt,
.crm-container #event-info dt {
  flex: 0 0 140px !important;
  width: 140px !important;
  max-width: 140px !important;
  min-width: 140px !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
}

.crm-container .crm-event-info-form-block .label label,
.crm-container #event-info .label label {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* Right Column: Content Space */
.crm-container .crm-event-info-form-block .content,
.crm-container #event-info .content,
.crm-container .crm-event-info-form-block dd,
.crm-container #event-info dd {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  color: #334155 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Event Description Text Area */
.crm-container .crm-event-description-block,
.crm-container #event-info .event_description-content {
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  padding: 1.75rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
  color: #334155 !important;
  line-height: 1.7 !important;
}

/* Event Flyer Auto-Resizing */
.crm-container .crm-event-description-block img,
.crm-container #event-info .event_description-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 1.25rem auto !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08) !important;
}

/* Register Button Area */
.crm-container .crm-event-info-form-block .crm-submit-buttons,
.crm-container #event-info .crm-submit-buttons {
  margin-top: 1.25rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.crm-container .crm-event-info-form-block a.button,
.crm-container #event-info a.button {
  display: inline-block !important;
  font-size: 1.05rem !important;
  padding: 0.6rem 1.5rem !important;
  font-weight: 600 !important;
  background-color: #0d6efd !important;
  border: 1px solid #0d6efd !important;
  color: #ffffff !important;
  border-radius: 0.375rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.crm-container .crm-event-info-form-block a.button:hover,
.crm-container #event-info a.button:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: #ffffff !important;
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
  .crm-container .crm-event-info-form-block .crm-section,
  .crm-container #event-info .crm-section {
    flex-direction: column !important;
    gap: 0.25rem !important;
  }

  .crm-container .crm-event-info-form-block .label,
  .crm-container #event-info .label {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   7. Event Registration Workflow Fine-Tuning (Full Flow & System Alerts)
   ========================================================================== */

/* Force ALL Registration Steps & System Alerts to 850px Centered */
.crm-container #crm-container,
.crm-container form[name="Register"],
.crm-container form[name="Confirm"],
.crm-container form[name="ThankYou"],
.crm-container .crm-event-register-form-block,
.crm-container .crm-event-additional_participant-form-block,
.crm-container .crm-event-confirm-form-block,
.crm-container .crm-event-thankyou-form-block,
#crm-main-content-wrapper form,
.crm-container .crm-status-block,
.crm-container .messages,
.crm-container .status {
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* System Alerts & Green Success Message Containers */
.crm-container .crm-status-block,
.crm-container .messages,
.crm-container .status,
.crm-container .crm-success,
.crm-container div.status.status-success {
  border-radius: 0.5rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1.5rem !important;
  padding: 1rem 1.25rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

.crm-container .crm-status-block table,
.crm-container .messages table {
  width: 100% !important;
  margin: 0 !important;
}

/* Step Progress Wizard Bar */
.crm-container ul.wizard-bar,
.crm-container .crm-wizard-legend,
.crm-container #wizard-step,
.crm-container ul.ui-tabs-nav {
  max-width: 850px !important;
  margin: 1rem auto 2rem auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  list-style: none !important;
  border-radius: 0.5rem !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
}

.crm-container ul.wizard-bar li,
.crm-container .crm-wizard-legend li,
.crm-container #wizard-step li,
.crm-container ul.ui-tabs-nav li {
  flex: 1 !important;
  text-align: center !important;
  padding: 0.75rem 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border-right: 1px solid #e2e8f0 !important;
  margin: 0 !important;
  background-color: transparent !important;
}

.crm-container ul.wizard-bar li:last-child,
.crm-container .crm-wizard-legend li:last-child,
.crm-container #wizard-step li:last-child {
  border-right: none !important;
}

.crm-container ul.wizard-bar li.current-step,
.crm-container ul.wizard-bar li.active,
.crm-container .crm-wizard-legend li.current-step,
.crm-container ul.ui-tabs-nav li.ui-tabs-active {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}

.crm-container ul.wizard-bar li.past-step,
.crm-container .crm-wizard-legend li.past-step {
  background-color: #e2e8f0 !important;
  color: #334155 !important;
}

/* Form Fieldsets & Input Cards */
.crm-container fieldset.crm-group,
.crm-container fieldset,
.crm-container .crm-event-register-form-block fieldset,
.crm-container .crm-event-confirm-form-block fieldset {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  padding: 1.5rem !important;
  margin-bottom: 1.75rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.03) !important;
}

.crm-container fieldset.crm-group legend,
.crm-container fieldset legend {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  padding: 0 0.5rem !important;
  margin-bottom: 1rem !important;
  border-bottom: none !important;
  width: auto !important;
  float: none !important;
}

/* Prices & Fee Selection Radio Boxes */
.crm-container .crm-section.price_set-section,
.crm-container .crm-event-fee-form-block {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.375rem !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
}

.crm-container .price-set-row,
.crm-container .crm-price-set-option {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.5rem 0 !important;
}

/* Standard Form Row Layout */
.crm-container .crm-section {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
}

.crm-container .crm-section .label {
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 240px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-align: left !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
}

.crm-container .crm-section .content {
  flex: 1 1 auto !important;
  min-width: 200px !important;
}

/* Action Buttons (Continue, Back, Cancel, Complete) */
.crm-container .crm-submit-buttons {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important;
  margin-top: 1.5rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid #e2e8f0 !important;
}

.crm-container .crm-submit-buttons .crm-form-submit:not([name*="back"]):not([name*="cancel"]),
.crm-container .crm-submit-buttons input[type="submit"]:not([name*="back"]):not([name*="cancel"]) {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.25) !important;
  cursor: pointer !important;
}

.crm-container .crm-submit-buttons .crm-form-submit:not([name*="back"]):not([name*="cancel"]):hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
}

.crm-container .crm-submit-buttons .crm-form-submit[name*="back"],
.crm-container .crm-submit-buttons .crm-form-submit[name*="cancel"],
.crm-container .crm-submit-buttons input[name*="back"],
.crm-container .crm-submit-buttons input[name*="cancel"] {
  background-color: #64748b !important;
  border-color: #64748b !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 0.375rem !important;
  cursor: pointer !important;
}

/* Responsive Mobile Layout */
@media (max-width: 576px) {
  .crm-container .crm-section {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .crm-container .crm-section .label {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.25rem !important;
  }
}
/* ==========================================================================
   8. CiviCRM Profile Page Fine-Tuning (Newsletter & Email Subscriptions)
   ========================================================================== */

/* Container Card & Centering (Matches 850px Form Theme) */
.crm-container form[name="Edit"],
.crm-container .crm-profile-inputs,
.crm-container .crm-profile-create-form-block,
#crm-main-content-wrapper .crm-profile-inputs {
  max-width: 600px !important;
  margin: 1.5rem auto !important;
  padding: 2rem !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

/* Hide title ONLY on CiviCRM Profile / Edit pages */
#crm-container:has(form[name="Edit"]),
#crm-container:has(.crm-profile-inputs) {
  & .crm-page-title-wrapper {
    display: none !important;
  }
}
/* Pre-Help Text: Reduce Top Margin & Padding Inside Form Card */
.crm-container form[name="Edit"] .help,
.crm-container form[name="Edit"] .crm-help,
.crm-container .crm-profile-inputs .help,
.crm-container .crm-profile-inputs .crm-help {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* Remove Extra Top Spacing From First Child Element */
.crm-container form[name="Edit"] > *:first-child,
.crm-container .crm-profile-inputs > *:first-child {
  margin-top: 0 !important;
}

/* Field Row Spacing & Clean Layout */
.crm-container .crm-profile-inputs .crm-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin-bottom: 1.25rem !important;
  width: 100% !important;
}

/* Labels: Positioned Above Inputs for Modern Form Look */
.crm-container .crm-profile-inputs .crm-section .label,
.crm-container .crm-profile-inputs label {
  width: 100% !important;
  max-width: 100% !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 0.35rem !important;
  font-size: 0.95rem !important;
  text-align: left !important;
}

/* Input Wrappers & Control Fields */
.crm-container .crm-profile-inputs .crm-section .content {
  width: 100% !important;
}

.crm-container .crm-profile-inputs input[type="text"],
.crm-container .crm-profile-inputs input[type="email"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0.6rem 0.75rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.375rem !important;
  background-color: #ffffff !important;
  font-size: 0.95rem !important;
  color: #334155 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Focus State for Inputs */
.crm-container .crm-profile-inputs input[type="text"]:focus,
.crm-container .crm-profile-inputs input[type="email"]:focus {
  border-color: #0d6efd !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
}

/* Submit Button Row Alignment & Wrapper Normalization */
.crm-container .crm-profile-inputs .crm-submit-buttons,
.crm-container form[name="Edit"] .crm-submit-buttons,
.crm-container .crm-submit-buttons {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* Strip Default Spacing from CiviCRM Button Wrapper Spans */
.crm-container .crm-submit-buttons .crm-button,
.crm-container .crm-submit-buttons span.crm-button-type-cancel,
.crm-container .crm-submit-buttons span.crm-button-type-next {
  display: inline-flex !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Base Shared Dimensions for Save & Cancel Buttons */
.crm-container .crm-submit-buttons input[type="submit"],
.crm-container .crm-submit-buttons button,
.crm-container .crm-submit-buttons a.button,
.crm-container .crm-submit-buttons .crm-button-type-cancel a,
.crm-container form[name="Edit"] [name*="cancel"] {
  height: 42px !important;
  line-height: 40px !important;
  padding: 0 1.25rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 0.375rem !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

/* Primary Action Button (Save / Subscribe) */
.crm-container .crm-submit-buttons input[type="submit"]:not([name*="cancel"]):not([class*="cancel"]),
.crm-container .crm-submit-buttons button:not([name*="cancel"]):not([class*="cancel"]),
.crm-container form[name="Edit"] input[name="_qf_Edit_next"],
.crm-container form[name="Edit"] input[name="_qf_Edit_upload"] {
  background-color: #0d6efd !important;
  border: 1px solid #0d6efd !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.2) !important;
  transition: background-color 0.15s ease-in-out !important;
}

.crm-container .crm-submit-buttons input[type="submit"]:not([name*="cancel"]):hover,
.crm-container form[name="Edit"] input[name="_qf_Edit_next"]:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: #ffffff !important;
}

/* Secondary Cancel Button (Light Gray Background + Dark Text) */
.crm-container .crm-submit-buttons input[name*="cancel"],
.crm-container .crm-submit-buttons input[class*="cancel"],
.crm-container .crm-submit-buttons a[class*="cancel"],
.crm-container .crm-submit-buttons a[href*="cancel"],
.crm-container .crm-submit-buttons .cancel,
.crm-container .crm-submit-buttons .crm-button-type-cancel,
.crm-container .crm-submit-buttons .crm-button-type-cancel a,
.crm-container form[name="Edit"] [name*="cancel"],
.crm-container form[name="Edit"] [class*="cancel"] {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
}

/* Inner Text Nodes for Cancel Button */
.crm-container .crm-submit-buttons a[class*="cancel"] *,
.crm-container .crm-submit-buttons a[href*="cancel"] *,
.crm-container .crm-submit-buttons .cancel *,
.crm-container .crm-submit-buttons .crm-button-type-cancel *,
.crm-container form[name="Edit"] [class*="cancel"] * {
  color: #0f172a !important;
  text-decoration: none !important;
}

/* Cancel Button Hover & Focus States */
.crm-container .crm-submit-buttons input[name*="cancel"]:hover,
.crm-container .crm-submit-buttons input[class*="cancel"]:hover,
.crm-container .crm-submit-buttons a[class*="cancel"]:hover,
.crm-container .crm-submit-buttons a[href*="cancel"]:hover,
.crm-container .crm-submit-buttons .cancel:hover,
.crm-container .crm-submit-buttons .crm-button-type-cancel:hover,
.crm-container form[name="Edit"] [name*="cancel"]:hover,
.crm-container form[name="Edit"] [class*="cancel"]:hover,
.crm-container .crm-submit-buttons a[class*="cancel"]:focus,
.crm-container .crm-submit-buttons a[href*="cancel"]:focus {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  text-decoration: none !important;
}

/* Mandatory Field Asterisk */
.crm-container .crm-profile-inputs .crm-asterisk {
  color: #dc3545 !important;
  margin-left: 0.2rem !important;
}
/* ==========================================================================
   Side-by-Side (Split) Seniors Event Article Styles
   ========================================================================== */

.seniors-event-split {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  color: #334155;
  font-family: inherit;
  line-height: 1.6;
}

/* Article Header */
.seniors-event-split .article-header {
  margin-bottom: 2rem;
}

.seniors-event-split .category-badge {
  display: inline-block;
  background-color: #e0e7ff;
  color: #3730a3;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

.seniors-event-split .event-headline {
  color: #1A206D;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.seniors-event-split .lead-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  margin: 0;
}

/* Split Layout Grid Structure */
.seniors-event-split .split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Left Column: Media & Centered PDF Link */
.seniors-event-split .flyer-card {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
}

.seniors-event-split .flyer-image {
  width: 100%;
  height: auto;
  display: block;
}

.seniors-event-split .flyer-pdf-link {
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

.seniors-event-split .pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  padding: 0.6rem 1.25rem;
  background-color: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 0.5rem;
  color: #475569 !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: all 0.15s ease-in-out;
}

.seniors-event-split .pdf-btn svg {
  color: #dc2626;
  flex-shrink: 0;
}

.seniors-event-split .pdf-btn:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a !important;
}

/* Right Column: Cards & Content */
.seniors-event-split .split-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Base Card Styling */
.seniors-event-split .card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.seniors-event-split .card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f1f5f9;
  color: #1A206D;
}

.seniors-event-split .card-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: #1A206D;
}

/* Metadata List */
.seniors-event-split .meta-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.seniors-event-split .meta-list li {
  display: flex;
  flex-direction: column;
}

.seniors-event-split .meta-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #94a3b8;
}

.seniors-event-split .meta-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
}

.seniors-event-split .highlight-text {
  color: #059669;
}

/* Highlights List */
.seniors-event-split .feature-list {
  padding-left: 1.2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
}

/* CTAs */
.seniors-event-split .cta-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.seniors-event-split .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out;
  text-align: center;
}

.seniors-event-split .btn-block {
  width: 100%;
  box-sizing: border-box;
}

.seniors-event-split .btn-primary {
  background-color: #0d6efd;
  color: #ffffff !important;
  border: 1px solid #0d6efd;
  box-shadow: 0 2px 4px rgba(13, 110, 253, 0.15);
}

.seniors-event-split .btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

.seniors-event-split .btn-secondary {
  background-color: #f1f5f9;
  color: #334155 !important;
  border: 1px solid #cbd5e1;
}

.seniors-event-split .btn-secondary:hover {
  background-color: #e2e8f0;
  color: #0f172a !important;
}

/* Footer Section */
.seniors-event-split .support-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.85rem 1.25rem;
  border-radius: 0.5rem;
  color: #64748b;
  font-size: 0.9rem;
}

.seniors-event-split .support-box svg {
  color: #64748b;
  flex-shrink: 0;
}

.seniors-event-split .support-box a {
  color: #0d6efd;
  text-decoration: underline;
}

/* Desktop Responsiveness */
@media (min-width: 768px) {
  .seniors-event-split .split-layout {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}
/* Styling for non-registration notice banner */
.seniors-event-split .notice-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
}

.seniors-event-split .notice-card svg {
  color: #16a34a;
  flex-shrink: 0;
}
/* Remove default Joomla article module list bullets */
.no-list-bullet, 
.no-list-bullet ul, 
.no-list-bullet li {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* ==========================================================================
   T4 Framework Overrides for Seniors Event Module
   ========================================================================== */

/* 1. Hide the T4 Module Title completely */
.t4-clean-article-event .module-title,
.t4-clean-article-event .t4-module-title,
.t4-clean-article-event h3.module-title,
.t4-clean-article-event h2 {
  display: none !important;
}

/* 2. Remove T4 UL / LI module bullets and default padding */
.t4-clean-article-event ul,
.t4-clean-article-event ul > li,
.t4-clean-article-event li {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  border: none !important; /* Removes default T4 list border lines if present */
}

/* 3. Strip list markers and pseudo-elements introduced by T4 */
.t4-clean-article-event li::before,
.t4-clean-article-event li::marker {
  content: none !important;
  display: none !important;
}
/* ==========================================================================
   T4 Framework Overrides for Seniors Event Module
   ========================================================================== */

/* 1. Hide the T4 Module Title completely */
.t4-clean-article-event .module-title,
.t4-clean-article-event .t4-module-title,
.t4-clean-article-event h3.module-title,
.t4-clean-article-event h2 {
  display: none !important;
}

/* Strip bullets, padding, and margins from Joomla 5 Articles module lists */
ul.mod-articles-items,
ul.mod-articles-items > li,
ul.mod-list,
ul.mod-list > li {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove default browser markers */
ul.mod-articles-items > li::marker,
ul.mod-articles-items > li::before {
  content: "" !important;
  display: none !important;
}
/* Automatically adds a prominent banner at the top of any article in the Past Events category */
.category-past-events .event-details::before {
  content: "⌛ PAST EVENT ARCHIVE - This event took place in the past.";
  display: block;
  background-color: #6c757d;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.category-past-events .event-details::before {
  content: "⌛ PAST EVENT ARCHIVE — This event has concluded.";
  display: block;
  width: 100%;
  background-color: #6c757d;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
/* Style Joomla default readmore link into a Bootstrap Danger Button */
p.readmore a,
.blog .item-readmore a,
.items-leading .readmore a {
  display: inline-block !important;
  font-weight: 700 !important;
  text-align: center !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  padding: 0.375rem 0.85rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  border-radius: 0.375rem !important;
  color: #fff !important;
  background-color: #dc3545 !important; /* Bootstrap Danger Red */
  border-color: #dc3545 !important;
  text-decoration: none !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Hover and Focus states */
p.readmore a:hover,
.blog .item-readmore a:hover {
  background-color: #bb2d3b !important;
  border-color: #b02a37 !important;
  color: #fff !important;
}
/* ==========================================
   MOBILE TYPOGRAPHY & ACCESSIBILITY OVERRIDES
   ========================================== */
@media screen and (max-width: 768px) {
  /* Prevent horizontal scrolling from container overflows */
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  /* Increase base font size for mobile readability */
  body {
    font-size: 1.1rem !important; /* Scaled up from 17px default */
    line-height: 1.6 !important;
  }

  /* Scale up titles and headings */
  h1, .hero-title {
    font-size: 2.1rem !important;
  }

  h2 {
    font-size: 1.75rem !important;
  }

  h3 {
    font-size: 1.35rem !important;
  }

  /* Scale homepage hero subtext, slogans, and banners */
  .slogan, 
  .subtitle, 
  .alert-banner {
    font-size: 1.2rem !important;
  }

  /* Improve mobile navigation links */
  .offcanvas .nav-link {
    font-size: 1.25rem !important;
  }

  /* Prevent tiny table text on mobile devices */
  .schedule-table th, 
  .membership-table th {
    font-size: 0.95rem !important;
  }

  .schedule-table td, 
  .membership-table td {
    font-size: 1rem !important;
  }
}
/* Force left alignment inside T4 Off-Canvas panel */
.t4-offcanvas,
.t4-offcanvas-body,
.t4-off-canvas-body {
    text-align: left !important;
}

/* Override flex centering on menu containers */
.t4-offcanvas .mod-menu,
.t4-offcanvas ul.nav,
.t4-off-canvas-body .mod-menu,
.t4-off-canvas-body ul.nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Ensure links span full width and align left */
.t4-offcanvas ul.nav > li,
.t4-off-canvas-body ul.nav > li,
.t4-offcanvas ul.mod-menu > li,
.t4-off-canvas-body ul.mod-menu > li {
    width: 100% !important;
    text-align: left !important;
}

.t4-offcanvas a,
.t4-off-canvas-body a {
    display: block !important;
    text-align: left !important;
    width: 100% !important;
}
/* 1. Expand parent wrappers to fill available space */
.t4-navigation,
.t4-header-navigation,
.t4-navbar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* 2. Lock offcanvas toggle button to the far right */
.t4-offcanvas-toggle-wrapper,
.t4-navbar .btn-offcanvas,
.t4-navbar .offcanvas-toggle,
.t4-navbar [data-bs-toggle="offcanvas"],
.t4-navbar .navbar-toggler {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block !important;
}

/* 3. Force button wrapper alignment on mobile */
@media (max-width: 991.98px) {
    .t4-navigation .row,
    .t4-header .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}
/* Change hamburger icon color and hover state */
.t4-offcanvas-toggle-wrapper .btn,
.t4-navbar .btn-offcanvas,
.t4-navbar .offcanvas-toggle,
.t4-navbar [data-bs-toggle="offcanvas"] {
    color: #ff0000 !important; /* Replace #ff0000 with your preferred hex color */
}

/* Optional: Icon color when hovered */
.t4-offcanvas-toggle-wrapper .btn:hover,
.t4-navbar .btn-offcanvas:hover,
.t4-navbar .offcanvas-toggle:hover {
    color: #00ff00 !important; /* Replace with hover color */
}
/* ==========================================================================
   Code below added on Aug 7, 2026
   ========================================================================== */

/* ==========================================================================
   E. MULTI-LEVEL FLYOUT SUB-MENUS (FORCED OVERFLOW & HOVER)
   ========================================================================== */

/* 1. Allow sub-menus to break outside parent container boundaries */
.navbar-nav .dropdown-menu,
.t4-mainnav .dropdown-menu,
.t4-megamenu .dropdown-menu {
  overflow: visible !important; /* Critical: Prevents clipping nested sub-menus */
}

/* 2. Set positioning context on each menu item */
.navbar-nav .dropdown-menu > li,
.t4-mainnav .dropdown-menu > li,
.t4-megamenu .dropdown-menu > li {
  position: relative !important;
}

/* 3. Target nested 2nd/3rd level sub-menus directly */
.navbar-nav .dropdown-menu .dropdown-menu,
.t4-mainnav .dropdown-menu .dropdown-menu,
.t4-megamenu .dropdown-menu .dropdown-menu {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important; /* Forces sub-menu to fly out to the right */
  right: auto !important;
  margin-top: -8px !important;
  margin-left: 0 !important;
  display: none;
  z-index: 1050 !important; /* Ensures it sits above other content */
}

/* 4. Display child menu on hover of parent item */
.navbar-nav .dropdown-menu li:hover > .dropdown-menu,
.t4-mainnav .dropdown-menu li:hover > .dropdown-menu,
.t4-megamenu .dropdown-menu li:hover > .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 5. Sub-menu right-arrow indicator */
.navbar-nav .dropdown-menu .dropdown-toggle::after,
.t4-mainnav .dropdown-menu .dropdown-toggle::after,
.t4-megamenu .dropdown-menu .dropdown-toggle::after {
  display: inline-block !important;
  margin-left: 0.5em !important;
  vertical-align: middle !important;
  content: "" !important;
  border-top: 0.3em solid transparent !important;
  border-right: 0 !important;
  border-bottom: 0.3em solid transparent !important;
  border-left: 0.3em solid currentColor !important; /* Right arrow */
  float: right !important;
  margin-top: 6px !important;
}

/* 6. Mobile display (Stack vertically on screens below 992px) */
@media (max-width: 991.98px) {
  .navbar-nav .dropdown-menu .dropdown-menu,
  .t4-mainnav .dropdown-menu .dropdown-menu,
  .t4-megamenu .dropdown-menu .dropdown-menu {
    position: static !important;
    left: 0 !important;
    margin-left: 15px !important;
    border-left: 2px solid #0284C7 !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   F. RIGHT-ALIGNED FLYOUT SUB-MENUS (FLY TO LEFT)
   ========================================================================== */

/* 1. Force nested sub-menu to expand to the left instead of right */
.navbar-nav .dropdown-menu-end .dropdown-menu,
.navbar-nav .dropdown-menu.flyout-left .dropdown-menu,
.t4-mainnav .dropdown-menu.flyout-left .dropdown-menu {
  left: auto !important;
  right: 100% !important;
  margin-left: 0 !important;
  margin-right: 2px !important;
}

/* 2. Flip arrow indicator to point left (for items opening left) */
.navbar-nav .dropdown-menu.flyout-left .dropdown-toggle::after,
.t4-mainnav .dropdown-menu.flyout-left .dropdown-toggle::after {
  border-left: 0 !important;
  border-right: 0.3em solid currentColor !important; /* Left-pointing arrow */
  float: left !important;
  margin-right: 0.5em !important;
  margin-left: 0 !important;
}
/* ==========================================================================
   G. AUTOMATIC LEFT-FLYOUT FOR RIGHTMOST MENU ITEMS
   ========================================================================== */

/* Target sub-menus under the last 2 main navigation items */
.navbar-nav > li:nth-last-child(-n+2) .dropdown-menu .dropdown-menu,
.t4-mainnav .nav > li:nth-last-child(-n+2) .dropdown-menu .dropdown-menu,
.t4-megamenu .nav > li:nth-last-child(-n+2) .dropdown-menu .dropdown-menu {
  left: auto !important;
  right: 100% !important; /* Fly out to the left instead of right */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Flip the arrow indicator to point left for these rightmost sub-menus */
.navbar-nav > li:nth-last-child(-n+2) .dropdown-menu .dropdown-toggle::after,
.t4-mainnav .nav > li:nth-last-child(-n+2) .dropdown-menu .dropdown-toggle::after,
.t4-megamenu .nav > li:nth-last-child(-n+2) .dropdown-menu .dropdown-toggle::after {
  border-left: 0 !important;
  border-right: 0.3em solid currentColor !important; /* Left arrow */
  float: left !important;
  margin-right: 0.5em !important;
  margin-left: 0 !important;
}
/* ==========================================================================
   H. REMOVE DUPLICATE DOWN ARROWS FROM SUB-MENU FLYOUTS
   ========================================================================== */

/* 1. Hide default template/FontAwesome down-arrow icons inside dropdowns */
.navbar-nav .dropdown-menu .dropdown-toggle i,
.navbar-nav .dropdown-menu .dropdown-toggle .t4-caret,
.t4-mainnav .dropdown-menu .dropdown-toggle i,
.t4-mainnav .dropdown-menu .dropdown-toggle .t4-caret,
.t4-megamenu .dropdown-menu .dropdown-toggle i,
.t4-megamenu .dropdown-menu .dropdown-toggle .t4-caret {
  display: none !important;
}

/* 2. Reset standard Bootstrap ::after element inside dropdowns so only 1 arrow displays */
.navbar-nav .dropdown-menu .dropdown-toggle::before,
.t4-mainnav .dropdown-menu .dropdown-toggle::before,
.t4-megamenu .dropdown-menu .dropdown-toggle::before {
  display: none !important;
}
/* added code below on Aug 15, 2026 */
/* ==========================================================================
   PAST EVENTS DIRECTORY STYLING (LIGHT BLUE BRANDING)
   ========================================================================== */
/* ==========================================================================
   PAST EVENTS DIRECTORY - COMPLETE ACCORDION & CONTAINER STYLES
   ========================================================================== */

/* 1. Main Outer Box & Width Constraint */
.past-events-styled {
  background-color: #f0f7ff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 12px !important;
  padding: 1.75rem !important;
  box-shadow: 0 4px 12px rgba(12, 74, 110, 0.08) !important;
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2. Interactive Accordion Year Headers */
.past-events-styled .category-title,
.past-events-styled h3 {
  background-color: #e0f2fe !important;
  color: #0c4a6e !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  padding: 0.85rem 1.25rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  position: relative !important;
  user-select: none;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  border-bottom: none !important;
  transition: background-color 0.2s ease !important;
}

.past-events-styled h3:first-child,
.past-events-styled .category-title:first-child {
  margin-top: 0 !important;
}

.past-events-styled .category-title:hover,
.past-events-styled h3:hover {
  background-color: #bae6fd !important;
}

/* Accordion Arrow Indicator */
.past-events-styled .category-title::after,
.past-events-styled h3::after {
  content: "▼";
  font-size: 0.85rem;
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}

.past-events-styled .category-title.collapsed::after,
.past-events-styled h3.collapsed::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* 3. Article List & Hidden State */
.past-events-styled ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 1rem !important;
}

.past-events-styled ul.is-collapsed {
  display: none !important;
}

/* 4. White Event Item Cards & Hover State */
.past-events-styled ul li {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 0.85rem 1.25rem !important;
  margin-bottom: 0.65rem !important;
  transition: all 0.2s ease-in-out !important;
}

.past-events-styled ul li:hover {
  transform: translateX(4px) !important;
  border-color: #0c4a6e !important;
  box-shadow: 0 2px 8px rgba(12, 74, 110, 0.12) !important;
}

.past-events-styled ul li a {
  color: #0c4a6e !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-size: 1.05rem !important;
}

.past-events-styled ul li a:hover {
  color: #0284c7 !important;
  text-decoration: underline !important;
}
/* Universal Accordion Header Selector */
.past-events-styled .js-accordion-header {
  background-color: #e0f2fe !important;
  color: #0c4a6e !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  padding: 0.85rem 1.25rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  position: relative !important;
  user-select: none;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  border-bottom: none !important;
  transition: background-color 0.2s ease !important;
}

.past-events-styled .js-accordion-header:hover {
  background-color: #bae6fd !important;
}

/* Arrow indicator for universal class */
.past-events-styled .js-accordion-header::after {
  content: "▼";
  font-size: 0.85rem;
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}

.past-events-styled .js-accordion-header.collapsed::after {
  transform: translateY(-50%) rotate(-90deg);
}
/* Below added Aug 19, 2026 */
/* ==========================================================================
   PHOCA GALLERY CUSTOM OVERRIDES
   ========================================================================== */

/* Main Gallery Container */
#phocagallery {
  max-width: 960px;
  margin: 0 auto;
  padding: 15px 0;
}

/* Category & Image Box Styling */
.pg-cv-box,
.phocagallery-box-file {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px;
  padding: 8px;
  margin: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hover Effect on Thumbnail Containers */
.pg-cv-box:hover,
.phocagallery-box-file:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  border-color: #fcd34d !important;
}

/* Image Thumbnails */
.pg-cv-box img,
.phocagallery-box-file img {
  border-radius: 2px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Titles and Captions */
.pg-cv-box-title,
.phocagallery-box-file-first {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0c4a6e;
  margin-top: 6px;
  text-align: center;
}

/* Pagination & Action Icons */
.pg-pagination,
.phocagallery-pagination {
  margin-top: 20px;
  text-align: center;
}

.pg-pagination .pagination,
.phocagallery-pagination .pagination {
  display: inline-flex;
  gap: 4px;
}