/* ============================================================
   COLUMBIA CLUB OF NEW YORK — ADDITIONAL CSS
   B4PQ, LLC. Page- and feature-specific styles. Design-system
   tokens and site-wide primitives live in style.css.

   Cleaned 2026-07-01: dead and duplicate rules removed, self-
   overriding declarations collapsed to their final values,
   media queries consolidated by breakpoint, stray unnumbered
   blocks foldered into the TOC. One legacy block retained and
   flagged (search 'LEGACY') — verify against live markup
   before pruning. Full change log in the delivery notes.

   ============================================================
   TABLE OF CONTENTS
   ============================================================
   ── GLOBAL / SITE-WIDE ──────────────────────────────────────
    1. Header Banner & Frosted Header Card
    2. Admin Bar — fixed-header offset
    3. Mobile Offcanvas Menu
    4. Page Title Hero Area (banner titles, breadcrumbs)
    5. Utilities (B4PQ font sizes, shortcode centering,
       eyebrow suppression)
   ── HOMEPAGE ────────────────────────────────────────────────
    6. Homepage — hide page title, hero video
    7. Homepage Bands — Stats / About / Featured Event /
       Membership Tiers / Community / CTA
    8. Community Features List (dark checklist)
   ── INTERIOR / CONTENT PAGES ────────────────────────────────
    9. Interior Pages — Cover Block full width
   10. People Page (ID 339)
   11. Board Members — Officer Cards
   12. Board Members — Names List
   13. Board Section Headings
   14. Related Pages — sibling nav cards
   15. Contact Page (ID 221) — icons, hero, two-column
       card, WPForms styling
   16. News Archive (/club-news/)
   17. Single News Article
   ── EVENTS ──────────────────────────────────────────────────
   18. Events — shared (featured-image cap, ticket-stock
       hiding, modal header fix)
   19. Events List Page (/events/)
   20. Single Event Page (.cc-ecard template)
   21. Featured Event Shortcode — [fe_full]
   ── MEMBERSHIP / MEMBERPRESS ────────────────────────────────
   22. Membership Join Page (+ Penn Club callout)
   23. Registration / Checkout Page
   24. Registration Page — two-column description
   25. MemberPress ReadyLaunch — Account Page
   26. Penn Club Member Badge — Account Page
   27. Directory Profile — visibility toggles
   28. WPForms — confirmation message
   ── RESPONSIVE & MOTION (keep last) ─────────────────────────
   29. Responsive — grouped by breakpoint
       (1024 / 900 / 768 / 640 / 560 / 480 / 360)
   30. Reduced Motion — !important overrides (MUST stay last:
       wins by source order within the !important cascade)
   ============================================================ */


/* ##########################################################
   GLOBAL / SITE-WIDE
   ########################################################## */

/* ============================================================
   1. Header Banner & Frosted Header Card
   ============================================================ */
.header-banner-box {
    width: 450px;
    max-width: 90%;
    margin-left: 20px !important;
    margin-right: auto !important;
}
/* Frosted-glass header card (matches the Contact "Get in Touch" overlay) */
.cc-header-card {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);   /* Safari */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 24px 28px;
  max-width: 520px;
  color: #fff;
}
.cc-header-card :where(h1, h2, h3, h4, p, a, span) { color: #fff; }

/* ============================================================
   2. Admin Bar — fixed-header offset
   ============================================================ */
.admin-bar #header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  .admin-bar #header {
    top: 46px !important;
  }
}

/* ============================================================
   3. Mobile Offcanvas Menu
   ============================================================ */
/* Panel container — color token */
.ct-panel.ct-panel-default,
#offcanvas.ct-panel,
.ct-panel[data-behaviour*="modal"],
.ct-panel {
  --theme-palette-color-1: var(--cc-blue-dark);
}

/* ── Mobile/tablet: fix panel geometry ───────────────────────
   Below 1000 px the hamburger shows and #offcanvas becomes the
   right-side drawer. Clear the .ct-header height constraint so
   the panel fills the full viewport height. */
@media (max-width: 999.98px) {
  #offcanvas.ct-panel {
    height: unset !important;                        /* clear 64 px .ct-header constraint */
    bottom: 0 !important;                            /* extend to viewport bottom */
    left: auto !important;                           /* release left anchor for right-side layout */
    width: var(--side-panel-width, 320px) !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    flex-direction: column !important;
  }
  #offcanvas.ct-panel .ct-panel-inner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }
  #offcanvas.ct-panel .ct-panel-content[data-device="mobile"] {
    height: auto !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }
}

/* Background of the panel inner */
.ct-panel .ct-panel-content-inner,
.ct-panel-content[data-device="mobile"],
.ct-panel .ct-panel-content {
  background: var(--cc-blue-dark) !important;
}

/* Menu links */
.ct-panel .ct-menu-link {
  color: var(--cc-white) !important;
  display: block !important;
  padding: 1rem 1.5rem !important;
  font-size: 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.ct-panel .ct-menu-link:hover,
.ct-panel .current-menu-item > .ct-menu-link {
  color: var(--cc-white) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Submenu links (dropdowns inside mobile menu) */
.ct-panel .sub-menu .ct-menu-link {
  padding-left: 2.5rem !important;
  font-size: 0.95rem !important;
  background: rgba(0, 0, 0, 0.12) !important;
}

/* Panel chrome — close button, headings */
.ct-panel .ct-toggle-close,
.ct-panel .ct-toggle-close svg path { fill: var(--cc-white) !important; color: var(--cc-white) !important; }
.ct-panel .ct-panel-heading { color: var(--cc-white) !important; }

/* List reset */
.ct-panel ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }

/* Expand/collapse arrows for submenu toggles */
.ct-panel .ct-toggle-dropdown-mobile,
.ct-panel .ct-toggle-dropdown-mobile svg { color: var(--cc-white) !important; fill: var(--cc-white) !important; }

/* ============================================================
   4. Page Title Hero Area
   ============================================================ */
/* All interior page titles default to white on dark blue banner */
h1.page-title { color: var(--cc-white) !important; }

/* Single news article — title is dark blue (above content, not in banner) */
.single-post h1.page-title {
  color: var(--cc-blue-dark) !important;
  text-shadow: none !important;
}

/* Single event — title hidden, shown in block editor content instead */
.single-tribe_events h1.page-title,
.single-tribe_events .tribe-events-single-event-title { display: none !important; }

/* Breadcrumb colors on dark blue banner */
.ct-breadcrumbs a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none;
}
.ct-breadcrumbs a:hover { color: var(--cc-white) !important; }
.ct-breadcrumbs .ct-breadcrumb-separator { color: rgba(255, 255, 255, 0.5) !important; }
.ct-page-header .page-description { color: rgba(255, 255, 255, 0.8) !important; }

/* ============================================================
   5. Utilities
   ============================================================ */
/* B4PQ font options */
.b4pq-12 {
    font-size: 12px;
    color: var(--cc-white);
}

/* Center shortcode blocks */
.sc-center { text-align: center; }
.sc-center > * { margin-left: auto; margin-right: auto; }

/* WordPress paragraph blocks used as section eyebrows — small-font,
   palette-color-2 (Alma Mater Blue). Suppressed per design system:
   one deliberate kicker per page is voice; one above every section
   is AI grammar. Our .section-eyebrow rule only caught custom classes;
   these are bare WP blocks that need a separate rule. */
.entry-content p.has-small-font-size.has-palette-color-2-color {
  display: none;
}
/* Phone field: restore left room for the intl-tel-input country-flag dropdown.
   The .wpforms-field padding rule (1rem !important) doesn't exclude tel, so it
   clobbers the library's 52px and the number runs under the flag. */
.wpforms-container .wpforms-field-phone .iti input[type="tel"],
.wpforms-container .wpforms-field-phone .iti input.wpforms-smart-phone-field {
    padding-left: 52px !important;
}

/* ##########################################################
   HOMEPAGE
   ########################################################## */

/* ============================================================
   6. Homepage — hide page title, hero video
   ============================================================ */
.home .entry-header,
.home .page-title,
.home h1.entry-title {
  display: none !important;
}

/* Top-of-page hero video — full-bleed, replaces the old .cc-hero section.
   Add the class "cc-hero-video" to the video block via the editor's
   Advanced panel > "Additional CSS Class(es)" field (separate from the
   block's own per-block custom CSS panel) so this rule keeps targeting
   it reliably even if the block's auto-generated custom-CSS class
   (wp-custom-css-xxxxxxxx) changes later.

   The homepage's .entry-content is already full-width (the .home
   selector is excluded from the Cover Block Full Width breakout rule
   in Section 9 below), so no 100vw/negative-margin trick is needed here
   — width: 100% of its own container already reaches the viewport edges.
 */
.home .cc-hero-video,
.home .cc-hero-video figure,
.home .wp-block-video {
  background: transparent !important;
  line-height: 0;
  display: block;
  width: 100%;
  margin: 0px 0px 20px 0px !important;
  padding: 0 !important;
}

.home .cc-hero-video video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.78 / 1 !important;
  min-height: 200px;
  object-fit: cover !important;
  object-position: center center;
  background: transparent !important;
}

/* ============================================================
   7. Homepage Bands — Stats / About / Featured Event /
      Membership Tiers / Community / CTA
   ============================================================ */
/* ── STATS BAND ─────────────────────────────────────────── */

.stats-band {
  background: var(--cc-blue-dark);
  padding: 3rem 0;
}

.stats-band__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: 0 var(--cc-space-6);
}

.stats-band__item {
  text-align: center;
  padding: 1rem 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-band__item:last-child {
  border-right: none;
}

.stats-band__number {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-4xl);
  font-weight: 700;
  color: var(--cc-blue);
  line-height: 1;
  margin-bottom: 0.375rem;
}

.stats-band__label {
  font-size: var(--cc-text-sm);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
  letter-spacing: 0.02em;
}


/* ── ABOUT SECTION ──────────────────────────────────────── */

.about {
  padding: var(--cc-space-20) 0;
  background: var(--cc-white);
}

.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* Eyebrow hidden — the hero eyebrow (.cc-hero__eyebrow) is the one deliberate
   brand marker per page. Section-level eyebrows create repetitive scaffolding. */
.about__eyebrow {
  display: none;
}

.about__title {
  font-family: var(--cc-font-display);
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: 700;
  color: var(--cc-blue-dark);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.about__body {
  font-size: var(--cc-text-lg);
  line-height: 1.8;
  color: var(--cc-text-muted);
  margin-bottom: 1.5rem;
}

/* Body prose — orphan control */
.about__body,
.community__body {
  text-wrap: pretty;
}

.about__visual {
  position: relative;
}

.about__image-wrap {
  position: relative;
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  box-shadow: var(--cc-shadow-lg);
}

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

.about__image-wrap::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  width: 80px;
  height: 80px;
  border: 3px solid var(--cc-blue);
  border-radius: var(--cc-radius);
  z-index: -1;
}

.about__image-wrap::after {
  content: '';
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 80px;
  height: 80px;
  border: 3px solid var(--cc-blue-light);
  border-radius: var(--cc-radius);
  z-index: -1;
}


/* ── FEATURED EVENT ─────────────────────────────────────── */

.featured-event {
  background: var(--cc-off-white);
  padding: 4rem 0 5rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

/* Section eyebrow hidden — same reasoning as .about__eyebrow above.
   If a single section ever needs a deliberate kicker, use .cc-eyebrow
   with restraint (at most once per page view). */
.section-eyebrow {
  display: none;
}

.section-title {
  font-family: var(--cc-font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--cc-blue-dark);
  line-height: 1.2;
}

.event-card {
  background: var(--cc-white);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  box-shadow: var(--cc-shadow);
  display: grid;
  grid-template-columns: 320px 1fr;
  border: 1px solid var(--cc-border);
  transition: var(--cc-transition-slow);
}

.event-card:hover {
  box-shadow: var(--cc-shadow-lg);
  transform: translateY(-3px);
}

.event-card__image {
  background: linear-gradient(160deg, var(--cc-blue-dark) 0%, var(--cc-blue) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}

.event-card__date-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--cc-radius);
  padding: 1.5rem 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.event-card__month {
  font-size: var(--cc-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-white);
  display: block;
  margin-bottom: 0.25rem;
}

.event-card__day {
  font-family: var(--cc-font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--cc-white);
  line-height: 1;
  display: block;
}

.event-card__year {
  font-size: var(--cc-text-sm);
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-top: 0.25rem;
}

.event-card__type {
  position: relative;
  z-index: 1;
  background: rgba(117, 170, 219, 0.2);
  border: 1px solid rgba(117, 170, 219, 0.3);
  border-radius: var(--cc-radius-full);
  padding: 0.375rem 1rem;
  font-size: var(--cc-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-white);
}

.event-card__body {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-card__tag {
  display: inline-block;
  background: var(--cc-blue-light);
  color: var(--cc-blue-dark);
  font-size: var(--cc-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.875rem;
  border-radius: var(--cc-radius-full);
  margin-bottom: 1rem;
}

.event-card__title {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-3xl);
  font-weight: 700;
  color: var(--cc-blue-dark);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.event-card__desc {
  font-size: var(--cc-text-base);
  line-height: 1.75;
  color: var(--cc-text-muted);
  margin-bottom: 1.5rem;
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.event-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--cc-text-sm);
  color: var(--cc-text-muted);
  font-weight: 500;
}

.event-card__meta-item svg {
  color: var(--cc-blue-dark);
  flex-shrink: 0;
}

.event-card__speakers {
  background: var(--cc-off-white);
  border-radius: var(--cc-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.event-card__speakers-label {
  font-size: var(--cc-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-blue-dark);
  margin-bottom: 0.5rem;
}

.event-card__speaker {
  font-size: var(--cc-text-sm);
  color: var(--cc-text-muted);
  line-height: 1.5;
}

.event-card__speaker strong {
  color: var(--cc-blue-dark);
  font-weight: 600;
}

.event-card__notice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--cc-text-sm);
  color: #92400E;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: var(--cc-radius-full);
  padding: 0.375rem 0.875rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.event-card__actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
}

/* FIX: forwards styling to the inner .wp-block-button__link whenever the
   editor applies this class to the .wp-block-button wrapper instead — see
   the matching note above .btn-white for the full explanation. */
.btn-ghost-dark,
.wp-block-button.btn-ghost-dark .wp-block-button__link {
  background: transparent;
  color: var(--cc-blue-dark);
  border-color: var(--cc-gray-200);
}

.btn-ghost-dark:hover,
.wp-block-button.btn-ghost-dark .wp-block-button__link:hover {
  border-color: var(--cc-blue-dark);
  background: var(--cc-blue-light);
}


/* ── MEMBERSHIP TIERS ───────────────────────────────────── */

.membership {
  padding: var(--cc-space-20) 0;
  background: var(--cc-white);
}

.tiers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.tier-card {
  background: var(--cc-white);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 1.75rem 1.5rem;
  transition: var(--cc-transition-slow);
  position: relative;
  overflow: hidden;
}

.tier-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cc-blue);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.tier-card:hover {
  border-color: var(--cc-blue);
  box-shadow: var(--cc-shadow);
  transform: translateY(-3px);
}

.tier-card:hover::before {
  transform: scaleX(1);
}

.tier-card--free {
  background: var(--cc-blue-light);
  border-color: rgba(117, 170, 219, 0.3);
}

/* Tier icon boxes hidden — decorative icon containers above headings are
   a generic card-grid pattern. The tier name and price carry the hierarchy. */
.tier-card__icon {
  display: none;
}

.tier-card__name {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-lg);
  font-weight: 600;
  color: var(--cc-blue-dark);
  margin-bottom: 0.375rem;
  line-height: 1.2;
}

.tier-card__price {
  font-size: var(--cc-text-2xl);
  font-weight: 700;
  color: var(--cc-blue-dark);
  margin-bottom: 0.25rem;
}

.tier-card__price span {
  font-size: var(--cc-text-sm);
  font-weight: 400;
  color: var(--cc-text-muted);
}

.tier-card__badge {
  display: inline-block;
  background: var(--cc-blue-dark);
  color: var(--cc-white);
  font-size: var(--cc-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.625rem;
  border-radius: var(--cc-radius-full);
  margin-top: 0.5rem;
}

.tier-card__desc {
  font-size: var(--cc-text-sm);
  color: var(--cc-text-muted);
  line-height: 1.5;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cc-border);
}

.membership__cta {
  text-align: center;
  margin-top: 3rem;
}

.membership__cta p {
  font-size: var(--cc-text-base);
  color: var(--cc-text-muted);
  margin-bottom: 1.25rem;
}


/* ── COMMUNITY ──────────────────────────────────────────── */

.community {
  background: var(--cc-blue-dark);
  padding: clamp(5rem, 7vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}

.community::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(117, 170, 219, 0.12) 0%, transparent 70%);
  border-radius: 50%;
}

.community__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.community__title {
  font-family: var(--cc-font-display);
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: 700;
  color: var(--cc-white);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.community__title em {
  color: var(--cc-blue);
  font-style: italic;
}

.community__body {
  font-size: var(--cc-text-lg);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 2rem;
}

.community__cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.community__card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--cc-radius-lg);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: var(--cc-transition);
}

.community__card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(117, 170, 219, 0.3);
}

.community__card-icon {
  display: none;
}

/* Collapse the 10%-wide icon column and expand the text column to full width */
.community__card .wp-block-columns > .wp-block-column:first-child:has(.community__card-icon) {
  display: none;
}
.community__card .wp-block-columns > .wp-block-column:last-child {
  flex-basis: 100% !important;
  max-width: 100% !important;
}

.community__card-title {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-lg);
  font-weight: 600;
  color: var(--cc-white);
  margin-bottom: 0.25rem;
}

.community__card-desc {
  font-size: var(--cc-text-sm);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  letter-spacing: 0.01em;
}


/* ── CTA BAND ───────────────────────────────────────────── */

.cta-band {
  background: linear-gradient(135deg, var(--cc-blue) 0%, var(--cc-blue-dark) 100%);
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* This is the ORIGINAL CTA band background pattern from the source
   homepage mockup (columbia-club-homepage.html) — a tiled SVG icon
   pattern at 3% white opacity, repeating edge-to-edge across the whole
   band. An earlier edit mistakenly replaced this with a copy of the
   Community section's radial-gradient glow instead, which was never
   part of the original CTA band design — that mix-up is corrected here. */
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M0 0h80v80H0V0zm20 20v40h40V20H20zm20 35a15 15 0 1 1 0-30 15 15 0 0 1 0 30z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cta-band__content {
  position: relative;
  z-index: 1;
}

.cta-band__title {
  font-family: var(--cc-font-display);
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--cc-white);
  margin-bottom: 1rem;
}

.cta-band__subtitle {
  font-size: var(--cc-text-lg);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2.5rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.cta-band__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* FIX: the editor sometimes applies these classes to the .wp-block-button
   WRAPPER div (which has no padding/border-radius/shape of its own) instead
   of the inner .wp-block-button__link that actually renders as the visible
   button. The plain .btn-white/.btn-outline-white rules below only style
   whichever element the class lands on directly — harmless when it's on
   the link, but invisible-looking when it's on the wrapper (a discrepancy
   some browsers render more forgivingly than others). The two extra
   selectors here forward the same styling to the inner link whenever the
   class is found on the wrapper instead, so it works correctly either way. */
.btn-white,
.wp-block-button.btn-white .wp-block-button__link {
  background: var(--cc-white);
  color: var(--cc-blue-dark);
  border-color: var(--cc-white);
}

.btn-white:hover,
.wp-block-button.btn-white .wp-block-button__link:hover {
  background: var(--cc-blue-light);
  border-color: var(--cc-blue-light);
  transform: translateY(-2px);
  box-shadow: var(--cc-shadow-lg);
}

.btn-outline-white,
.wp-block-button.btn-outline-white .wp-block-button__link {
  background: transparent;
  color: var(--cc-white);
  /* Raised from 0.5 to 0.75 opacity — at 0.5 the border had inconsistent
     visibility depending on where it sat against the CTA band's light-to-
     dark blue gradient (low contrast against the lighter end of it). */
  border-color: rgba(255, 255, 255, 0.75);
}

.btn-outline-white:hover,
.wp-block-button.btn-outline-white .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--cc-white);
  transform: translateY(-2px);
}

/* ============================================================
   8. Community Features List (dark checklist)
   ============================================================ */
.community__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
}

.community__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.community__feature-icon {
  width: 22px;
  height: 22px;
  background: rgba(117, 170, 219, 0.2);
  border: 1px solid rgba(117, 170, 219, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 0.75rem;
  color: var(--cc-blue);
}


/* ##########################################################
   INTERIOR / CONTENT PAGES
   ########################################################## */

/* ============================================================
   9. Interior Pages — Cover Block full width
   ============================================================ */
.page:not(.home) .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body:not(.home) .wp-block-cover:not(.wp-block-column *) {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
}

/* Remove gap between sticky header and first cover block */
.page:not(.home) .wp-block-cover:first-child { margin-top: 0 !important; }

/* ============================================================
   10. People Page (ID 339)
   ============================================================ */
.page-id-339 h2,
.page-id-339 h2.board-section-title {
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
}
.page-id-339 .wp-block-group { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.page-id-339 .wp-block-group + .wp-block-group { margin-top: 0 !important; }

/* ============================================================
   11. Board Members — Officer Cards
   ============================================================ */
/* 3-column grid, centered on page */
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  max-width: 900px;
  margin: 0 auto 1.5rem !important;
}
.board-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Individual card */
.board-member-card {
  text-align: center;
  padding: 1rem 0.75rem;
  background: var(--cc-white);
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  transition: var(--cc-transition-slow);
}
.board-member-card:hover {
  border-color: var(--cc-blue);
  box-shadow: var(--cc-shadow);
  transform: translateY(-3px);
}

/* Circular headshot */
.board-member-photo img,
.board-member-placeholder {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.625rem;
  display: block;
  border: 4px solid var(--cc-blue-light);
  background: var(--cc-blue-light);
}

/* Name */
.board-member-name {
  font-family: 'Montserrat', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cc-blue-dark);
  line-height: 1.3;
  margin-bottom: 0.125rem;
}
.board-member-name a { color: var(--cc-blue-dark); text-decoration: none; }
.board-member-name a:hover { color: var(--cc-blue-dark); }

/* Position/title below name */
.board-member-title {
  font-size: 0.8125rem;
  color: var(--cc-text-muted);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}

/* ============================================================
   12. Board Members — Names List
   ============================================================ */
/* Multi-column grid list */
.board-names-list {
  display: grid;
  list-style: none;
  padding: 0;
  gap: 0;
  max-width: 800px;
  margin: 0 auto 1.5rem !important;
}
.board-names-list.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
.board-names-list.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem; }

/* Individual name row */
.board-name-item {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.875rem;
  background: var(--cc-blue-light);
  border-radius: var(--cc-radius-sm);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

/* Name in Montserrat */
.board-name {
  font-family: 'Montserrat', Georgia, serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--cc-blue-dark);
  line-height: 1.3;
}

/* Optional position title below name */
.board-name-title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--cc-text-muted);
  margin-top: 0.1rem;
  line-height: 1.3;
}

/* ============================================================
   13. Board Section Headings
   ============================================================ */
.board-section-title {
  text-align: center;
  color: var(--cc-blue-dark);
  margin: 0 0 1rem !important;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--cc-blue-light);
}

/* ============================================================
   14. Related Pages — sibling nav cards
   ============================================================ */
.cc-related {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  padding-top: 1rem;
  padding-bottom: 4rem;          /* padding instead of margin — won't collapse */
  text-align: center;
}

.cc-related-title {
  font-family: 'Montserrat', Georgia, serif !important;
  font-size: 1.25rem !important;
  color: var(--cc-blue-dark) !important;
  text-align: center !important;
  margin: 0 0 1.25rem !important;
}

.cc-related-grid {
  display: grid;
  gap: 0.875rem;
  justify-content: center;
}
.cc-related-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 260px)); }
.cc-related-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 260px)); }
.cc-related-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 260px)); }

/* Individual card — title + arrow, no image */
.cc-related-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  padding: 1rem 1.25rem !important;
  background: var(--cc-white) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: var(--cc-transition) !important;
}
.cc-related-card:hover {
  border-color: var(--cc-blue) !important;
  background: var(--cc-blue-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(29, 79, 140, 0.10) !important;
}

.cc-related-card-title {
  font-family: 'Montserrat', Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--cc-blue-dark) !important;
  line-height: 1.3 !important;
}

.cc-related-card-arrow {
  color: var(--cc-blue-dark) !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s var(--cc-ease-out) !important;
}
.cc-related-card:hover .cc-related-card-arrow {
  transform: translateX(3px) !important;
  color: var(--cc-blue-dark) !important;
}

/* ============================================================
   15. Contact Page (ID 221) — icons, hero, two-column card,
       WPForms styling
   ============================================================ */

/* -- Info line icons (shared .cc-contact-line pattern) -- */
.cc-contact-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 26px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 18px 18px;
}
.cc-contact-line.cc-addr {
  align-items: flex-start;
  background-position: left 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%231D4F8C'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
.cc-contact-line.cc-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%231D4F8C'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
.cc-contact-line.cc-phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%231D4F8C'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

/* -- HERO — taller, authoritative dark overlay, content anchored to bottom -- */
.page-id-221 .wp-block-cover {
  min-height: 320px !important;
  align-items: flex-end !important;
}
.page-id-221 .wp-block-cover .wp-block-cover__background {
  background-color: var(--cc-blue-dark) !important;
  opacity: 0.58 !important;
}
/* Inner container anchored to bottom-left */
.page-id-221 .wp-block-cover .wp-block-cover__inner-container {
  padding: 0 0 2.5rem 2rem !important;
}
/* Header banner box: no extra left margin */
.page-id-221 .wp-block-cover .header-banner-box {
  margin-left: 0 !important;
  max-width: 100% !important;
}
/* Glass title box — frosted white on dark overlay */
.page-id-221 .wp-block-cover .wp-block-group.has-background {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--cc-radius) !important;
  padding: 1.5rem 1.75rem !important;
  max-width: 520px !important;
}
.page-id-221 .wp-block-cover h3 {
  font-family: var(--cc-font-display) !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  text-wrap: balance !important;
  color: #ffffff !important;
  margin: 0 0 0.5rem !important;
}
.page-id-221 .wp-block-cover p {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* -- TWO-COLUMN CARD -- */
.page-id-221 .entry-content > .wp-block-columns {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 3.5rem !important;
  margin-bottom: 3.5rem !important;
  padding: 0 !important;
  gap: 0 !important;
  align-items: stretch !important;
  border-radius: var(--cc-radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--cc-border) !important;
  box-shadow: var(--cc-shadow-lg) !important;
}
.page-id-221 .wp-block-column {
  align-self: stretch !important;
}

/* LEFT — dark navy info panel */
.page-id-221 .wp-block-column:first-child {
  flex: 0 0 300px !important;
  max-width: 300px !important;
  background: var(--cc-blue-dark) !important;
  padding: 2.5rem 2rem !important;
}
.page-id-221 .wp-block-column:first-child h2.wp-block-heading {
  font-family: var(--cc-font-display) !important;
  font-size: clamp(1.5rem, 2vw, 1.875rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
  margin: 0 0 0.75rem !important;
  padding-top: 0 !important;
}
.page-id-221 .wp-block-column:first-child .wp-block-paragraph:not(.cc-contact-line) {
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  margin: 0 0 2rem !important;
}
.page-id-221 .wp-block-column:first-child h4.wp-block-heading {
  font-family: var(--cc-font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.42) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 1.75rem !important;
  margin: 0 0 0.875rem !important;
}
.page-id-221 .wp-block-column:first-child .cc-contact-line {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0.75rem !important;
}
.page-id-221 .wp-block-column:first-child .cc-contact-line a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
}
.page-id-221 .wp-block-column:first-child .cc-contact-line a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
/* White SVG icons for dark panel */
.page-id-221 .wp-block-column:first-child .cc-contact-line.cc-addr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C%2Fsvg%3E") !important;
}
.page-id-221 .wp-block-column:first-child .cc-contact-line.cc-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C%2Fsvg%3E") !important;
}

/* RIGHT — white form panel */
.page-id-221 .wp-block-column:last-child {
  flex: 1 !important;
  background: #ffffff !important;
  padding: 2.5rem 2.25rem !important;
}

/* WPForms field spacing */
.page-id-221 .wpforms-field {
  margin-bottom: 1.125rem !important;
  padding: 0 !important;
}
/* Labels */
.page-id-221 .wpforms-field-label {
  font-family: var(--cc-font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #2C3E50 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 0.35rem !important;
  display: block !important;
}
/* Sub-labels (First / Last) */
.page-id-221 .wpforms-field-sublabel {
  font-size: 0.75rem !important;
  color: #9AAFC5 !important;
  margin-top: 0.2rem !important;
}
/* Inputs, select, textarea */
.page-id-221 .wpforms-field input[type="text"],
.page-id-221 .wpforms-field input[type="email"],
.page-id-221 .wpforms-field select,
.page-id-221 .wpforms-field textarea {
  width: 100% !important;
  border: 1.5px solid #DDE4ED !important;
  border-radius: var(--cc-radius) !important;
  padding: 0.625rem 0.875rem !important;
  font-family: var(--cc-font-body) !important;
  font-size: 0.9375rem !important;
  color: #1A1A2E !important;
  background: #ffffff !important;
  line-height: 1.5 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.page-id-221 .wpforms-field input:focus,
.page-id-221 .wpforms-field select:focus,
.page-id-221 .wpforms-field textarea:focus {
  border-color: var(--cc-blue) !important;
  box-shadow: 0 0 0 3px rgba(117, 170, 219, 0.2) !important;
}
.page-id-221 .wpforms-field textarea {
  min-height: 120px !important;
  resize: vertical !important;
}
/* Select arrow */
.page-id-221 .wpforms-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23556678' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px !important;
  padding-right: 2.25rem !important;
}
/* Name field: First + Last side by side */
.page-id-221 .wpforms-field-name .wpforms-field-row {
  display: flex !important;
  gap: 0.875rem !important;
}
.page-id-221 .wpforms-field-name .wpforms-field-row-block {
  flex: 1 !important;
  min-width: 0 !important;
}
/* Submit button — brand pill */
.page-id-221 .wpforms-submit-container {
  padding: 0 !important;
  margin-top: 0.5rem !important;
}
.page-id-221 .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.75rem 2.25rem !important;
  background: var(--cc-blue-dark) !important;
  color: #ffffff !important;
  font-family: var(--cc-font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border: none !important;
  border-radius: var(--cc-radius-full) !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
}
.page-id-221 .wpforms-submit:hover {
  background: var(--cc-blue-deeper) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--cc-shadow-lg) !important;
}

/* ============================================================
   16. News Archive (/club-news/)
   ============================================================ */
/* Full-width dark blue header band */
.blog .entry-header {
  background-color: var(--cc-blue-dark) !important;
  padding: 3rem 2rem !important;
  margin: 0 0 2rem !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Centered white page title */
.blog h1.page-title {
  color: var(--cc-white) !important;
  text-align: center !important;
}

/* Hide author from archive card meta */
.blog .entry-meta .avatar,
.blog .entry-meta .author { display: none !important; }

/* ============================================================
   17. Single News Article
   ============================================================ */
/* Constrained readable width for article content */
.single-post .entry-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}

/* Date + category meta bar below title */
.single-post .entry-meta {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  padding: 1rem 2rem;
  font-size: 0.875rem;
  color: var(--cc-text-muted);
  border-bottom: 1px solid var(--cc-blue-light);
}

/* Article body text */
.single-post .entry-content p {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--cc-text-article);
  margin-bottom: 1.5rem;
}

/* Hide author avatar and name — show date and category only */
.single-post .entry-meta .avatar,
.single-post .entry-meta img,
.single-post .entry-meta .author,
.single-post .author-avatar { display: none !important; }

/* Reduce gap between post header and featured image */
.single-post .ct-post-header { margin-bottom: 0 !important; padding-bottom: 0.5rem !important; }
.single-post .post-thumbnail { margin-bottom: 1.5rem !important; }


/* ##########################################################
   EVENTS
   ########################################################## */

/* ============================================================
   18. Events — shared
   ============================================================ */
/* Featured image size cap. Deliberately placed BEFORE the single-
   event card (§20), whose full-bleed image rule out-specifies it. */
.tribe-events-single img.wp-post-image,
.single-tribe_events img.wp-post-image {
    max-width: 250px !important;
    width: 100%;
    height: auto !important;
}

/* Hide number of tickets remaining — list view */
.tribe-events .tribe-events-c-small-cta__stock {
  display: none !important;
}
/* Hide number of tickets remaining — single view */
.tribe-common-b3.tribe-tickets__tickets-item-extra-available {
  display: none;
}

/* Event Tickets modal — hide sticky header & admin bar while a ticket/
   checkout modal is open so they can't overlap the modal's top content */
body.a11y-dialog__body-locked .ct-header,
body.a11y-dialog__body-locked #wpadminbar {
    display: none !important;
}

/* ============================================================
   19. Events List Page (/events/)
   Skeleton-styles theme. Matches single-event vocabulary:
   Columbia Blue, Montserrat body, Playfair headings, card borders.
   Relocated from style.css — page-specific, not design-system,
   rules.
   ============================================================ */

/* -- Simplify toolbar: hide redundant top-bar nav + view selector -- */
/* (Bottom Previous/Next remains for browsing; top arrows duplicate it)
   NOTE: because __nav is hidden here, its arrow-pill button styling
   was dead code and has been removed. If the top nav is ever
   re-enabled, restyle .tribe-common-c-btn-icon to match the
   Today pill below. */
.tribe-events-c-top-bar__nav,
.tribe-events-c-view-selector,
.tribe-events-c-top-bar__datepicker {
  display: none !important;
}

/* -- Collapse the oversized blue header bar -- */
.tribe-events-header {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0.5rem !important;
  box-shadow: none !important;
}
.tribe-events-header__events-bar {
  background: transparent !important;
  min-height: 0 !important;
  border: none !important;
}

/* -- Top bar: single consolidated rule (was split across two blocks) -- */
.tribe-events-c-top-bar {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0 0 1rem !important;
  margin-bottom: 2rem !important;
  background: transparent !important;
  min-height: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--cc-border) !important;
}
.tribe-events-c-top-bar__today-button {
  font-family: var(--cc-font-body) !important;
  font-size: var(--cc-text-sm) !important;
  font-weight: 600 !important;
  color: var(--cc-blue-dark) !important;
  padding: 0.375rem 0.875rem !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-full) !important;
  text-decoration: none !important;
  background: var(--cc-white) !important;
  display: inline-block !important;
  margin-left: 0.25rem !important;
  transition: border-color 0.15s var(--cc-ease-out) !important;
}
.tribe-events-c-top-bar__today-button:hover {
  border-color: var(--cc-blue-dark) !important;
  color: var(--cc-blue-dark) !important;
  text-decoration: none !important;
}

/* -- Events archive hero banner -- */
.post-type-archive-tribe_events .entry-header,
.tribe-events-pg-template .entry-header,
.tribe-events-page .entry-header {
  position: relative !important;
  background-image:
    linear-gradient(rgba(29,79,140,0.36), rgba(22,61,110,0.39)),
    url('https://club.b4pq.com/wp-content/uploads/2026/06/events_banner.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  padding: 4.5rem 2rem !important;
  margin: 0 0 2rem !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.post-type-archive-tribe_events h1.page-title,
.tribe-events-pg-template h1.page-title,
.tribe-events-page h1.page-title {
  color: var(--cc-white) !important;
  text-align: center !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

/* -- Container: constrain to site max-width with consistent gutter -- */
.tribe-events-l-container {
  max-width: var(--cc-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--cc-space-6) !important;
  padding-right: var(--cc-space-6) !important;
  box-sizing: border-box !important;
}

/* -- Before-HTML disclaimer: styled callout, not raw body text -- */
.tribe-events-before-html {
  background: var(--cc-blue-light) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-lg) !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 2rem !important;
}
.tribe-events-before-html p {
  font-size: var(--cc-text-sm) !important;
  color: var(--cc-text) !important;
  line-height: 1.65 !important;
  margin-bottom: 0.5rem !important;
}
.tribe-events-before-html p:last-child { margin-bottom: 0 !important; }
.tribe-events-before-html strong { color: var(--cc-blue-dark) !important; }
.tribe-events-before-html a {
  color: var(--cc-blue-dark) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

/* -- Month separator: heading + breathing room + ruled line -- */
.tribe-events-calendar-list__month-separator {
  padding: 0 0 0.875rem !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 2px solid var(--cc-blue-light) !important;
}
.tribe-events-calendar-list__month-separator + * {
  margin-top: 0 !important;
}
.tribe-events-calendar-list__month-separator-text {
  font-family: 'Montserrat', Georgia, serif !important;
  font-weight: 700 !important;
  color: var(--cc-blue-dark) !important;
  font-size: 1.5rem !important;
}

/* -- Date tag column: larger day number, lighter weekday -- */
.tribe-events-calendar-list__event-date-tag {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0.125rem 1.5rem 0 0 !important;
  border-right: 1px solid var(--cc-border) !important;
  min-width: 60px !important;
  flex-shrink: 0 !important;
  gap: 0.125rem !important;
}
.tribe-events-calendar-list__event-date-tag-weekday {
  font-family: var(--cc-font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--cc-blue) !important;
  line-height: 1 !important;
}
.tribe-events-calendar-list__event-date-tag-daynum {
  font-family: var(--cc-font-display) !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--cc-blue-dark) !important;
}

/* -- Event row card (gap merged in from a later duplicate rule) -- */
.tribe-events-calendar-list__event-row {
  border: 1px solid var(--cc-border) !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  background: var(--cc-white) !important;
  margin-bottom: 1.5rem !important;
  gap: 1.5rem !important;
  transition: box-shadow .15s, border-color .15s !important;
}
.tribe-events-calendar-list__event-row:hover {
  border-color: var(--cc-blue) !important;
  box-shadow: 0 4px 16px rgba(29,79,140,0.10) !important;
}
.tribe-events-calendar-list__event-details {
  padding-left: 1.5rem !important;
  padding-right: 0 !important;
}

/* -- FIX: title Playfair (beat TEC's .tribe-common-h6 specificity) -- */
.tribe-events-calendar-list__event-title.tribe-common-h6,
.tribe-events-calendar-list__event-title {
  font-family: 'Montserrat', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}
.tribe-events-calendar-list__event-title a,
.tribe-events-calendar-list__event-title-link {
  color: var(--cc-blue-deeper) !important;
  text-decoration: none !important;
}
.tribe-events-calendar-list__event-title a:hover {
  color: var(--cc-blue-dark) !important;
}

/* -- Category badges (TEC v6 tec- prefix) -- */
.tec-events-calendar-list__event-categories {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.375rem !important;
  margin: 0.5rem 0 !important;
}
.tec-events-calendar-list__category {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.2rem 0.75rem !important;
  background: var(--cc-blue-light) !important;
  color: var(--cc-blue-dark) !important;
  font-family: var(--cc-font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: var(--cc-radius-full) !important;
  text-decoration: none !important;
}
.tec-events-calendar-list__category a {
  color: inherit !important;
  text-decoration: none !important;
}
/* Hide the TEC color-swatch icon — pill conveys category without it */
.tec-events-calendar-list__category-icon { display: none !important; }

/* -- Venue address: mute the full street string -- */
.tribe-events-calendar-list__event-venue-address {
  color: var(--cc-text-muted) !important;
  font-size: var(--cc-text-sm) !important;
}

/* -- Sold Out badge + price -- */
.tribe-events-c-small-cta {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  margin-top: 0.75rem !important;
}
.tribe-events-c-small-cta__sold-out {
  display: inline-block !important;
  background: var(--cc-blue-dark) !important;
  color: var(--cc-white) !important;
  font-family: var(--cc-font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 0.2rem 0.75rem !important;
  border-radius: var(--cc-radius-full) !important;
}
.tribe-events-c-small-cta__price {
  font-family: var(--cc-font-body) !important;
  font-size: var(--cc-text-sm) !important;
  color: var(--cc-text-muted) !important;
  font-weight: 400 !important;
}

/* -- Featured image: cap height so card doesn't balloon -- */
.tribe-events-calendar-list__event-featured-image-wrapper {
  overflow: hidden !important;
  border-radius: var(--cc-radius) !important;
  align-self: flex-start !important;
}
.tribe-events-calendar-list__event-featured-image {
  max-height: 300px !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: var(--cc-radius) !important;
}

/* -- FIX: subscribe button (standalone container, not block) -- */
.tribe-events-c-subscribe-dropdown__container .tribe-events-c-subscribe-dropdown__button {
  background: transparent !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.875rem !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--cc-blue-dark) !important;
}
.tribe-events-c-subscribe-dropdown__container .tribe-events-c-subscribe-dropdown__button:hover {
  border-color: var(--cc-blue) !important;
}
.tribe-events-c-subscribe-dropdown__container .tribe-events-c-subscribe-dropdown__button-text {
  color: var(--cc-blue-dark) !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
}
.tribe-events-c-subscribe-dropdown__container .tribe-common-c-svgicon {
  width: 14px !important; height: 14px !important;
}
.tribe-events-c-subscribe-dropdown__container .tribe-common-c-svgicon path {
  fill: var(--cc-blue-dark) !important; stroke: var(--cc-blue-dark) !important;
}

/* -- Bottom nav: Previous / Next Events as pill buttons -- */
.tribe-events-c-nav {
  border-top: 1px solid var(--cc-border) !important;
  padding-top: 2rem !important;
  margin-top: 1rem !important;
  display: flex !important;
  justify-content: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}
.tribe-events-c-nav__prev,
.tribe-events-c-nav__next {
  display: inline-block !important;
  font-family: var(--cc-font-body) !important;
  font-size: var(--cc-text-sm) !important;
  font-weight: 600 !important;
  color: var(--cc-blue-dark) !important;
  padding: 0.625rem 1.5rem !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-full) !important;
  text-decoration: none !important;
  transition: border-color 0.15s var(--cc-ease-out), box-shadow 0.15s var(--cc-ease-out) !important;
}
.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover {
  border-color: var(--cc-blue-dark) !important;
  box-shadow: var(--cc-shadow-sm) !important;
  color: var(--cc-blue-dark) !important;
  text-decoration: none !important;
}

/* ============================================================
   20. SINGLE EVENT PAGE  (.cc-ecard template — shortcode classes)
   Card layout for ALL events via the Blocksy Single Event content
   block. Self-overriding margin/padding/date/venue rules from the
   iterative build have been collapsed to their final values.
   ============================================================ */

/* Outer group is a passthrough; the frame lives on the columns (the
   "stack"). Final values after collapsing three iterations: 12px
   vertical margin, WP block padding zeroed. */
.single-tribe_events .cc-ecard {
  max-width: 980px;
  margin: 12px auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent;
}
.single-tribe_events .cc-ecard > .wp-block-columns {
  border: 1px solid var(--cc-border, #e5e7eb);
  border-radius: var(--cc-radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--cc-shadow, 0 10px 30px rgba(0,0,0,.08));
  background: var(--cc-white, #fff);
  gap: 0; margin: 0; align-items: stretch !important;   /* navy panel runs full height */
}
.single-tribe_events .cc-ecard .wp-block-column { margin: 0; align-self: stretch !important; }

/* Constrain the disclaimer + prev/next blocks to the card's width */
.single-tribe_events .cc-event-width {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Fallback in case you'd rather not edit the block padding by hand:
   targets only the nav's wrapper group, leaving the disclaimer's padding intact */
.single-tribe_events .entry-content > .wp-block-group:has(.cc-event-nav) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The column's content sits inside a nested vertical group — control its
   spacing here. Media group also centers its stack across the column. */
.single-tribe_events .cc-ecard__media > .wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  width: 100% !important;
  align-items: center !important;
}
.single-tribe_events .cc-ecard__body > .wp-block-group { display: flex; flex-direction: column; gap: 12px; padding: 0; }

/* -- Navy media column (left) -- */
.single-tribe_events .cc-ecard__media {
  background: var(--cc-blue-dark, #1D4F8C);   /* #163D6E for a deeper navy */
  color: #fff;
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.single-tribe_events .cc-ecard__media :where(a, span, p, div, time) { color: #fff; }

/* Image full-bleed: flush to top & sides, overriding the §18 250px cap */
.single-tribe_events .cc-ecard__media .cc-event-image { margin: -32px -32px 0 !important; }
.single-tribe_events .cc-ecard__media .cc-event-image img {
  width: 100% !important;
  max-width: 100% !important;       /* beats the §18 Event Featured Image 250px size cap */
  height: auto !important;
  display: block;
  border-radius: 0 !important;      /* square top corners; the card's overflow:hidden rounds them */
}
/* keep the featured image full-bleed despite the group centering above */
.single-tribe_events .cc-ecard__media .cc-event-image {
  align-self: stretch !important;
}

/* Date — centered; day line then time line, time larger */
.single-tribe_events .cc-ecard__media .cc-event-date {
  display: block;
  text-align: center;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 600;
}
.single-tribe_events .cc-event-date-day  { display: block; font-size: 1rem;    font-weight: 600; }
.single-tribe_events .cc-event-date-time { display: block; font-size: 1.25rem; font-weight: 700; opacity: 1; margin-top: 3px; }

/* Cost */
.single-tribe_events .cc-ecard__media .cc-event-cost { font-family: var(--cc-font-display, "Montserrat", Georgia, serif); font-size: 2rem; font-weight: 700; line-height: 1; }

/* Venue — stacked and centered; address muted */
.single-tribe_events .cc-ecard__media .cc-event-venue { display: block; text-align: center; }
.cc-event-venue-name,
.cc-event-venue-address { display: block; }
.single-tribe_events .cc-event-venue-name,
.single-tribe_events .cc-event-venue-address { text-align: center; }
.cc-event-venue-address { font-size: .9em; opacity: .85; }

/* Add-to-Calendar dropdown (TEC subscribe) — legible on navy */
.single-tribe_events .cc-ecard__media .tribe-events-c-subscribe-dropdown__button { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.single-tribe_events .cc-ecard__media .tribe-events-c-subscribe-dropdown__button-text { background: transparent; border: none; color: rgba(255,255,255,.85); padding: 0; }
.single-tribe_events .cc-ecard__media .tribe-common-c-svgicon path { fill: rgba(255,255,255,.85); stroke: rgba(255,255,255,.85); }
.single-tribe_events .cc-ecard__media .tribe-events-c-subscribe-dropdown__content { background: var(--cc-blue-deeper, #163D6E); border: 1px solid rgba(255,255,255,.15); }
.single-tribe_events .cc-ecard__media .tribe-events-c-subscribe-dropdown__list-item a { color: rgba(255,255,255,.85); }
.single-tribe_events .cc-ecard__media .tribe-events-c-subscribe-dropdown__list-item a:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Add-to-calendar dropdown (native <details>) */
.single-tribe_events .cc-event-cal { position: relative; display: inline-block; align-self: center; }
.single-tribe_events .cc-event-cal__btn {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  color: #fff; font-size: .9rem; font-weight: 500;
}
.single-tribe_events .cc-event-cal__btn::-webkit-details-marker { display: none; }
.single-tribe_events .cc-event-cal__btn::after { content: "▾"; font-size: .8em; opacity: .8; }
.single-tribe_events .cc-event-cal[open] .cc-event-cal__btn::after { content: "▴"; }
.single-tribe_events .cc-event-cal__menu {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 6px); z-index: 5;
  min-width: 190px;
  background: var(--cc-blue-deeper, #163D6E);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.single-tribe_events .cc-event-cal__menu a {
  display: block; padding: 10px 16px; text-align: left;
  color: rgba(255,255,255,.9) !important; text-decoration: none; font-size: .85rem;
}
.single-tribe_events .cc-event-cal__menu a:hover { background: rgba(255,255,255,.1); }

/* -- White body column (right) -- */
.single-tribe_events .cc-ecard__body { padding: 36px 40px; display: flex; flex-direction: column; gap: 12px; }

/* Category eyebrow */
.single-tribe_events .cc-event-category {
  display: inline-block; width: fit-content;
  color: var(--cc-blue-dark, #1D4F8C); background: rgba(29,79,140,.08);
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; font-weight: 700; padding: 5px 12px; border-radius: var(--cc-radius-full, 999px);
}

/* Title + description */
.single-tribe_events .cc-event-title { font-family: var(--cc-font-display, "Montserrat", Georgia, serif); color: var(--cc-blue-dark, #1D4F8C); font-size: 2.4rem; line-height: 1.1; margin: 0; }
.single-tribe_events .cc-event-description { color: var(--cc-text-article, #333); line-height: 1.6; }
.single-tribe_events .cc-event-description p { margin: 0; }

/* Prev/next event nav — single consolidated rule (16px !important won
   over a later 24px in the old file; 16px is the intended value) */
.single-tribe_events .cc-event-nav {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 16px !important; padding-top: 16px;
  border-top: 1px solid var(--cc-border, #e5e7eb);
}
.single-tribe_events .cc-event-nav a {
  color: var(--cc-blue-dark, #1D4F8C); font-weight: 500; text-decoration: none;
  font-family: var(--cc-font-body, Montserrat, sans-serif); font-size: .9rem;
}
.single-tribe_events .cc-event-nav a:hover { color: var(--cc-blue-deeper, #163D6E); }
.single-tribe_events .cc-event-nav__next { margin-left: auto; text-align: right; }

/* Back-to-events link */
.single-tribe_events .cc-event-back { display: inline-block; margin: 0 0 1rem; color: var(--cc-blue-dark, #1D4F8C); font-family: var(--cc-font-body, Montserrat, sans-serif); font-weight: 500; text-decoration: none; }
.single-tribe_events .cc-event-back:hover { color: var(--cc-blue-deeper, #163D6E); }

/* Stack columns on mobile */
@media (max-width: 781px) {
  .single-tribe_events .cc-ecard > .wp-block-columns { flex-direction: column; }
  .single-tribe_events .cc-ecard .wp-block-column { flex-basis: 100% !important; }
}

/* ============================================================
   21. Featured Event Shortcode — [fe_full]
   ============================================================ */
/* -- Two-column card layout -- */
.cc-featured-event-full .wp-block-columns {
  gap: 0 !important;
  align-items: stretch !important;
}
.cc-featured-event-full .wp-block-column { align-self: stretch !important; }

/* Remove bottom padding from outer card group */
.cc-featured-event-full .wp-block-group.has-palette-color-3-background-color:has(.wp-block-columns) {
  padding-bottom: 0 !important;
}

/* -- Left column — dark blue gradient panel -- */

.cc-featured-event-full .wp-block-post-featured-image {
  padding: 10px 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
.cc-featured-event-full .wp-block-post-featured-image figure {
  width: fit-content !important;
  margin: 0 auto !important;
}
.cc-featured-event-full .wp-block-post-featured-image img {
  display: block !important;
  margin: 0 auto !important;
}

/* WHEN/WHERE labels */
.cc-featured-event-full .wp-block-column:first-child .wp-block-group .wp-block-paragraph {
  margin: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
}

/* Date/time block */
.cc-featured-event-full .tribe-events-schedule,
.cc-featured-event-full .tribe-events-schedule *,
.cc-featured-event-full .tribe-block__event-datetime,
.cc-featured-event-full .tribe-block__event-datetime * {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--cc-white) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cc-featured-event-full p.tribe-events-schedule__datetime {
  margin: 0 0 0.25rem !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.cc-featured-event-full .wp-block-paragraph + .wp-block-tribe-event-datetime,
.cc-featured-event-full .wp-block-paragraph + .tribe-block__event-datetime {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Venue block */
.cc-featured-event-full .tribe-block__venue {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0.25rem 0 !important;
  padding: 0.25rem 0 !important;
}
.cc-featured-event-full .tribe-block__venue__meta { border: none !important; padding: 0 !important; }

.cc-featured-event-full .tribe-block__venue__name h3,
.cc-featured-event-full .tribe-block__venue__name h3 a {
  font-family: 'Montserrat', Georgia, serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--cc-white) !important;
  text-decoration: none !important;
  margin: 0 0 0.25rem !important;
}

.cc-featured-event-full .tribe-block__venue__address,
.cc-featured-event-full .tribe-block__venue__address *,
.cc-featured-event-full .tribe-venue,
.cc-featured-event-full .tribe-venue *,
.cc-featured-event-full .tribe-venue-location,
.cc-featured-event-full .tribe-address {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 0.8125rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.5 !important;
}

.cc-featured-event-full .tribe-events-gmap,
.cc-featured-event-full .tribe-venue a {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 0.25rem !important;
}
.cc-featured-event-full .tribe-events-gmap:hover,
.cc-featured-event-full .tribe-venue a:hover { color: var(--cc-white) !important; }

/* -- Right column — white content panel -- */
.cc-featured-event-full .wp-block-column:last-child > * {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.cc-featured-event-full .wp-block-column:last-child > *:first-child { margin-top: 0 !important; }

.cc-featured-event-full .tribe-events-single-section p,
.cc-featured-event-full .entry-content p,
.cc-featured-event-full p {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  color: var(--cc-text-article) !important;
  margin-bottom: 0.5rem !important;
}
/* Left column text stays white on dark blue — this MUST sit after the
   general p rule above (CSS source order matters here). The identical
   rule that used to appear before the p rule was redundant and removed. */
.cc-featured-event-full .wp-block-column:first-child p { color: var(--cc-white) !important; }

/* -- Tickets block -- */
.cc-featured-event-full .tribe-tickets__tickets-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.cc-featured-event-full .tribe-tickets__tickets-item,
.cc-featured-event-full .tribe-tickets {
  width: 100% !important;
  max-width: 450px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin-top: 1rem !important;
  background: var(--cc-white) !important;
}

.cc-featured-event-full .tribe-tickets h2 {
  font-family: 'Montserrat', Georgia, serif !important;
  font-size: 1.25rem !important;
  color: var(--cc-blue-dark) !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.625rem !important;
  border-bottom: 1px solid var(--cc-blue-light) !important;
}

.cc-featured-event-full .tribe-tickets__buy {
  background: var(--cc-blue-dark) !important;
  border-radius: 9999px !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.625rem 1.75rem !important;
  border: none !important;
  color: var(--cc-white) !important;
  cursor: pointer !important;
  transition: background 0.25s ease !important;
}
.cc-featured-event-full .tribe-tickets__buy:hover { background: var(--cc-blue-deeper) !important; }

/* Hide public attendee list (shouldn't appear in an inline embed) */
.cc-featured-event-full .tribe-events-single-attendees { display: none !important; }

/* Featured image size cap — matches the single event page treatment */
.cc-featured-event-full img.wp-post-image {
  max-width: 250px !important;
  width: 100%;
  height: auto !important;
}


/* ##########################################################
   MEMBERSHIP / MEMBERPRESS
   ########################################################## */

/* ============================================================
   22. Membership Join Page (+ Penn Club callout)
   ============================================================ */
/* 6-card responsive grid — equal-height rows */
.cc-join-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}

/* Individual membership card — equal height via flex + full stretch */
.cc-join-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: var(--cc-white) !important;
  border: 2px solid var(--cc-border) !important;
  border-radius: 12px !important;
  padding: 1.75rem 1.5rem !important;
  text-align: center !important;
  transition: var(--cc-transition-slow) !important;
}
.cc-join-card:hover {
  border-color: var(--cc-blue) !important;
  box-shadow: 0 6px 20px rgba(29, 79, 140, 0.12) !important;
  transform: translateY(-4px) !important;
}

/* Alumni card — highlighted as the default/primary choice */
.cc-join-card.cc-join-featured {
  background: var(--cc-blue-light) !important;
  border-color: var(--cc-blue-dark) !important;
  border-width: 2px !important;
  box-shadow: 0 4px 16px rgba(29, 79, 140, 0.15) !important;
  position: relative !important;
}
.cc-join-card.cc-join-featured:hover {
  border-color: var(--cc-blue-dark) !important;
  box-shadow: 0 8px 24px rgba(29, 79, 140, 0.22) !important;
}

/* "Most Common" ribbon on the featured card */
.cc-join-card.cc-join-featured .cc-join-tier::before {
  content: "Most Common";
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--cc-blue-dark) !important;
  margin-bottom: 0.5rem !important;
}

/* Tier name — larger, fixed min-height so all align */
.cc-join-tier {
  font-family: 'Montserrat', Georgia, serif !important;
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  color: var(--cc-blue-dark) !important;
  line-height: 1.2 !important;
  margin: 0 0 0.75rem !important;
  min-height: 4rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Price */
.cc-join-price {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: var(--cc-blue-dark) !important;
  line-height: 1 !important;
  margin: 0 0 0.75rem !important;
}
.cc-join-price span {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--cc-text-muted) !important;
}

/* Who it's for — flex-grow pushes button to bottom for equal alignment */
.cc-join-who {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  color: var(--cc-text-muted) !important;
  line-height: 1.55 !important;
  margin: 0 0 1.5rem !important;
  flex-grow: 1 !important;
}

/* Join button — fills card width, pinned to bottom */
.cc-join-card .wp-block-buttons { margin-top: auto !important; }
.cc-join-card .cc-join-btn { width: 100% !important; }
.cc-join-card .cc-join-btn .wp-block-button__link {
  display: block !important;
  width: 100% !important;
  background: var(--cc-blue-dark) !important;
  color: var(--cc-white) !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 9999px !important;
  transition: background 0.25s ease !important;
}
.cc-join-card .cc-join-btn .wp-block-button__link:hover { background: var(--cc-blue-deeper) !important; }

/* -- Penn Club benefit callout -- */
.cc-penn-callout {
  background: linear-gradient(135deg, var(--cc-blue-dark) 0%, var(--cc-blue-deeper) 100%) !important;
  border-radius: 16px !important;
  text-align: center !important;
}
.cc-penn-callout h3 { margin: 0 0 0.75rem !important; }
.cc-penn-callout p {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0 0 1.25rem !important;
}
.cc-penn-callout .cc-penn-btn .wp-block-button__link {
  background: var(--cc-white) !important;
  color: var(--cc-blue-dark) !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 1.75rem !important;
  border-radius: 9999px !important;
  transition: var(--cc-transition) !important;
}
.cc-penn-callout .cc-penn-btn .wp-block-button__link:hover {
  background: var(--cc-blue-light) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   23. Registration / Checkout Page
   ============================================================ */
/* Membership image — round + polish (it's inside a <p>, floated right) */
.single-memberpressproduct .site-main p > img.wp-image-957,
.single-memberpressproduct .site-main p > img.alignright,
.single-memberpressproduct .site-main p > img.alignleft,
.single-memberpressproduct .entry-content img.alignright,
.single-memberpressproduct .entry-content img.alignleft {
  border-radius: 10px !important;
  box-shadow: 0 6px 20px rgba(29,79,140,0.14) !important;
  height: auto !important;
}

/* Checkout heading — Playfair, Columbia Blue (already working, keep) */
.single-memberpressproduct .invoice-heading,
.single-memberpressproduct h1.invoice-heading {
  font-family: 'Montserrat', Georgia, serif !important;
  color: var(--cc-blue-dark) !important;
  font-size: 2rem !important;
  margin-top: 0 !important;
}

/* Price line — prominent, on-brand */
.single-memberpressproduct .invoice-wrapper .mepr_price,
.single-memberpressproduct .mp-form-row.mepr_price,
.single-memberpressproduct .invoice-amount {
  color: var(--cc-blue-deeper) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}

/* CTA / submit — Columbia Blue */
.single-memberpressproduct .mepr-submit,
.single-memberpressproduct input.mepr-submit,
.single-memberpressproduct .mepr-signup-form input[type="submit"] {
  background: var(--cc-blue-dark) !important;
  border-color: var(--cc-blue-dark) !important;
  color: var(--cc-white) !important;
}
.single-memberpressproduct .mepr-submit:hover,
.single-memberpressproduct input.mepr-submit:hover {
  background: var(--cc-blue-deeper) !important;
  border-color: var(--cc-blue-deeper) !important;
}

/* ============================================================
   24. Registration Page — two-column description
   ============================================================ */
.cc-reg-cols {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.cc-reg-col-img {
  flex: 0 0 320px;
  max-width: 320px;
}
.cc-reg-col-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(29,79,140,0.14);
  display: block;
}
.cc-reg-col-text {
  flex: 1;
}
.cc-reg-col-text > p:first-child {
  margin-top: 0;
}

/* Mobile: stack */
@media (max-width: 768px) {
  .cc-reg-cols { flex-direction: column; }
  .cc-reg-col-img { flex: none; max-width: 100%; margin: 0 auto; }
}

/* ============================================================
   25. MemberPress ReadyLaunch — Account Page
   ============================================================ */
/* Welcome message — green default → Columbia Blue tint */
.mepr-account-welcome-message {
  background: var(--cc-blue-light) !important;
  border-color: var(--cc-blue) !important;
  color: var(--cc-blue-dark) !important;
}

/* Page headings — Montserrat in Columbia Blue */
.mepr_page_header,
.mepr-account-container h1,
.mepr-account-container h2 {
  font-family: 'Montserrat', Georgia, serif !important;
  color: var(--cc-blue-dark) !important;
}

/* Stop the grid from stretching the sidebar to full content height —
   let it size to its own content and pin to the top */
.mepr-account-container {
  align-items: start !important;
}
.mepr-nav {
  align-self: start !important;
  min-height: 0 !important;
  height: auto !important;
}

/* "Back to Club Website" — separate it from the account nav items */
.mepr-nav .cc-nav-back {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 0.75rem;
}

/* ============================================================
   26. Penn Club Member Badge — Account Page
   ============================================================ */
.mepr-profile-details__list {
  display: flex !important;
  flex-direction: column !important;
}
.mepr-profile-details__list .cc-penn-member-badge {
  margin-top: 0 !important;
  order: -1 !important;
}

/* ============================================================
   27. Directory Profile — visibility toggles
   ============================================================ */
.mpdir-profile-page .dashicons-hidden,
.mpdir-profile-page .dashicons-visibility {
  font-size: 26px !important;
  width: 26px !important;
  height: 26px !important;
}

.cc-dir-backbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 0;
}
.cc-dir-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cc-blue-dark) !important;
  font: 600 14px/1 Montserrat, sans-serif;
  text-decoration: none;
}
.cc-dir-back:hover {
  color: var(--cc-blue-deeper) !important;
  text-decoration: underline;
}

/* ============================================================
   28. WPForms — confirmation message
   ============================================================ */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full,
div.wpforms-container .wpforms-confirmation-container-full {
  background: var(--cc-blue-light) !important;
  border: 1px solid var(--cc-blue) !important;
  color: var(--cc-blue-dark) !important;
  border-radius: 8px !important;
  padding: 1rem 1.25rem !important;
}
.wpforms-confirmation-container-full p,
.wpforms-confirmation-container p {
  color: var(--cc-blue-dark) !important;
  margin: 0 !important;
}


/* ##########################################################
   RESPONSIVE & MOTION (keep last)
   ########################################################## */

/* ============================================================
   29. Responsive — grouped by breakpoint
   (Previously scattered across ~10 separate media queries;
   consolidated to one block per breakpoint. Component-local
   queries — offcanvas 999.98px, admin bar 782px, .cc-ecard
   781px, .cc-reg-cols 768px — remain with their components.)
   ============================================================ */

/* ── ≤1024px — homepage bands go single/two-column ────────── */
@media (max-width: 1024px) {
  .about__inner,
  .community__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .tiers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-band__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-band__item:nth-child(2) {
    border-right: none;
  }

  .event-card {
    grid-template-columns: 1fr;
  }

  .event-card__image {
    padding: 2rem;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.5rem;
  }
}

/* ── ≤900px — join grid to two columns ────────────────────── */
@media (max-width: 900px) {
  .cc-join-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cc-join-tier { min-height: auto !important; }
}

/* ── ≤768px — tablet/mobile ───────────────────────────────── */
@media (max-width: 768px) {
  /* Board grids collapse to 2 columns */
  .board-grid.cols-3,
  .board-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }

  /* Header banner text box */
  .header-banner-box { width: calc(100% - 40px); }

  /* Related Pages cards */
  .cc-related-grid.cols-3,
  .cc-related-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }

  /* -- Events list: stack image below content -- */
  .tribe-events-calendar-list__event {
    flex-direction: column !important;
  }
  .tribe-events-calendar-list__event-featured-image-wrapper {
    width: 100% !important;
    order: -1 !important;
    border-radius: var(--cc-radius) var(--cc-radius) 0 0 !important;
  }
  .tribe-events-calendar-list__event-featured-image {
    max-height: 220px !important;
    border-radius: var(--cc-radius) var(--cc-radius) 0 0 !important;
  }
  .tribe-events-calendar-list__event-details {
    padding: 1.25rem 0 0 !important;
  }
  /* Inline date tag on mobile */
  .tribe-events-calendar-list__event-date-tag {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0 0 0.75rem !important;
    border-right: none !important;
    border-bottom: 1px solid var(--cc-border) !important;
    min-width: 0 !important;
    margin-bottom: 0.75rem !important;
  }
  .tribe-events-calendar-list__event-date-tag-daynum {
    font-size: 1.5rem !important;
  }
  /* Before-HTML tighter on mobile */
  .tribe-events-before-html {
    padding: 1rem !important;
  }

  /* -- Single event page: stack columns vertically on mobile --
     LEGACY — these selectors target the old hand-built content
     system (.tribe_events .wp-block-columns, .tribe-events-event-image,
     h2.wp-block-post-title). Some may still match the .cc-ecard markup
     via the article's .tribe_events class; verify against post 1382 on
     a phone, then prune whatever no longer matches. The stacking itself
     is already handled by the .cc-ecard 781px query in §20. */
  .single-tribe_events .tribe_events .wp-block-columns {
    flex-direction: column !important;
    border-radius: var(--cc-radius) !important;
  }
  .single-tribe_events .tribe_events .wp-block-column:first-child {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: var(--cc-radius) var(--cc-radius) 0 0 !important;
  }
  .single-tribe_events .tribe_events .wp-block-column:last-child {
    flex: none !important;
    width: 100% !important;
  }
  .single-tribe_events .tribe-events-event-image img.wp-post-image {
    height: 220px !important;
    border-radius: var(--cc-radius) var(--cc-radius) 0 0 !important;
  }
  .single-tribe_events .tribe_events .wp-block-column:last-child > .wp-block-group {
    padding: 1.25rem !important;
  }
  .single-tribe_events h2.wp-block-post-title {
    font-size: clamp(1.375rem, 6vw, 1.75rem) !important;
  }

  /* -- Contact page — stack panels vertically -- */
  .page-id-221 .wp-block-cover {
    min-height: 240px !important;
  }
  .page-id-221 .entry-content > .wp-block-columns {
    flex-direction: column !important;
    border-radius: var(--cc-radius) !important;
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
  }
  .page-id-221 .wp-block-column:first-child,
  .page-id-221 .wp-block-column:last-child {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .page-id-221 .wp-block-column:first-child {
    padding: 1.75rem 1.5rem !important;
  }
  .page-id-221 .wp-block-column:last-child {
    padding: 1.75rem 1.5rem !important;
  }

  /* -- Homepage featured event card: tighten padding and gap when
     columns stack. Each inner flex group has 80px top/bottom padding
     set by WP block spacing. On desktop this creates nice vertical
     breathing in a two-column layout. Stacked, both 80px paddings
     face each other creating 160px dead space. -- */
  .has-palette-color-2-border-color .wp-block-column > .wp-block-group {
    gap: 1rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  /* Ticket widget: full width inside stacked featured event card */
  .cc-featured-event-tickets {
    width: 100% !important;
  }
}

/* ── ≤640px — small mobile ────────────────────────────────── */
@media (max-width: 640px) {
  /* Board name lists collapse to 1 column */
  .board-names-list.cols-2,
  .board-names-list.cols-3 { grid-template-columns: 1fr; }

  .tiers-grid {
    grid-template-columns: 1fr;
  }

  .event-card__body {
    padding: 1.5rem;
  }

  .community__inner {
    gap: 2rem;
  }
}

/* ── ≤560px — join grid single column ─────────────────────── */
@media (max-width: 560px) {
  .cc-join-grid { grid-template-columns: 1fr !important; }
}

/* ── ≤480px — narrow phones ───────────────────────────────── */
@media (max-width: 480px) {
  /* Board grids collapse to 1 column */
  .board-grid.cols-3,
  .board-grid.cols-4 { grid-template-columns: 1fr; }

  /* Related Pages cards to 1 column */
  .cc-related-grid.cols-2,
  .cc-related-grid.cols-3,
  .cc-related-grid.cols-4 { grid-template-columns: 1fr; }

  /* CTA band: stack the two buttons vertically. This targets the flex
     container .wp-block-buttons inside the group wrapper — the old
     .cta-band__actions rule targeted the wrapper (display:block) and
     never changed the row layout, so it has been removed. */
  .cta-band__actions .wp-block-buttons {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  .cta-band__actions .wp-block-button {
    width: 100% !important;
    max-width: 240px !important;
  }
  .cta-band__actions .wp-block-button .wp-block-button__link {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Penn Club benefit heading: the h4 renders at 24px on mobile
     which is large for a secondary heading — pull it down a notch. */
  .page-id-1047 h4.wp-block-heading {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }
}

/* ── ≤360px — very small viewports ────────────────────────── */
@media (max-width: 360px) {
  /* Community cards grid: 2 columns of 244px is fine down to 360px;
     collapse to 1 column only here. */
  .page-id-1047 .has-palette-color-1-background-color .wp-block-group[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   30. Reduced Motion — !important overrides
   These selectors use !important in their base declarations,
   so the universal * block in style.css cannot reach them.
   Placing the overrides here (same specificity, later source
   order) ensures they win within the !important cascade.
   MUST REMAIN THE LAST RULES IN THIS FILE.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cc-join-card {
    transition-duration: 0.01ms !important;
  }
  .cc-join-card:hover {
    transform: none !important;
  }

  .cc-penn-callout .cc-penn-btn .wp-block-button__link {
    transition-duration: 0.01ms !important;
  }
  .cc-penn-callout .cc-penn-btn .wp-block-button__link:hover {
    transform: none !important;
  }

  .cc-related-card {
    transition-duration: 0.01ms !important;
  }
  .cc-related-card:hover {
    transform: none !important;
  }

  .cc-related-card-arrow {
    transition-duration: 0.01ms !important;
  }
  .cc-related-card:hover .cc-related-card-arrow {
    transform: none !important;
  }
}