/**
 * BSMC Events — Calendar page styles (redesign 2026-08). All rules
 * scoped to `body.bsmc-events-calendar-body`. Font + heading-color
 * reclaim at the top mirrors clubhouse.css / single-event-detail.css so
 * BuddyBoss parent's Montserrat + heading tint don't leak in.
 */

/* ─── Font + heading reclaim ──────────────────────────────────── */
body.bsmc-events-calendar-body,
html body.bsmc-events-calendar-body p,
html body.bsmc-events-calendar-body a,
html body.bsmc-events-calendar-body div,
html body.bsmc-events-calendar-body li,
html body.bsmc-events-calendar-body ul,
html body.bsmc-events-calendar-body ol,
html body.bsmc-events-calendar-body span,
html body.bsmc-events-calendar-body em,
html body.bsmc-events-calendar-body button {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
html body.bsmc-events-calendar-body h1,
html body.bsmc-events-calendar-body h2,
html body.bsmc-events-calendar-body h3,
html body.bsmc-events-calendar-body h4,
html body.bsmc-events-calendar-body h5,
html body.bsmc-events-calendar-body h6,
html body.bsmc-events-calendar-body .bsmc-ec-nav__brand span,
html body.bsmc-events-calendar-body .bsmc-ec-nav__cta,
html body.bsmc-events-calendar-body .bsmc-ec-header__title,
html body.bsmc-events-calendar-body .bsmc-ec-card__title,
/* The card title's text lives inside a child <a>, and the Montserrat rule
   above targets `a` directly — so styling only the <h2> leaves the visible
   text in the body font. Target the anchor too. */
html body.bsmc-events-calendar-body .bsmc-ec-card__title a,
html body.bsmc-events-calendar-body .bsmc-ec-card__city,
html body.bsmc-events-calendar-body .bsmc-ec-chip,
html body.bsmc-events-calendar-body .bsmc-ec-btn,
html body.bsmc-events-calendar-body .bsmc-ec-empty,
html body.bsmc-events-calendar-body .bsmc-ec-footer__pitch {
    font-family: 'Bebas Neue', Impact, 'Oswald', sans-serif !important;
    font-weight: 400 !important;
}
html body.bsmc-events-calendar-body a { text-decoration: none !important; }

/* home3.css sets `body.bsmc-home3-body h1..h6 { color:#edeadf }` for the
   dark app-landing page. This page's body carries bsmc-home3-body too
   (needed for the shared marketing header styling) and would otherwise
   inherit cream headings on white sections. Chain both body classes for
   higher specificity + force ink black back on the content-area titles.
   The dark "What's On" band restores white via its own rule further down. */
html body.bsmc-events-calendar-body.bsmc-home3-body h1,
html body.bsmc-events-calendar-body.bsmc-home3-body h2,
html body.bsmc-events-calendar-body.bsmc-home3-body h3,
html body.bsmc-events-calendar-body.bsmc-home3-body h4,
html body.bsmc-events-calendar-body.bsmc-home3-body h5,
html body.bsmc-events-calendar-body.bsmc-home3-body h6,
html body.bsmc-events-calendar-body.bsmc-home3-body .bsmc-ec-card__title,
html body.bsmc-events-calendar-body.bsmc-home3-body .bsmc-ec-empty {
    color: var(--ec-ink) !important;
    -webkit-text-fill-color: var(--ec-ink) !important;
}
html body.bsmc-events-calendar-body.bsmc-home3-body .bsmc-ec-header .bsmc-ec-header__title {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ─── Tokens + base ───────────────────────────────────────────── */
:root {
    --ec-accent: #A18A55;
    --ec-accent-fill: #A18A55;   /* backgrounds and borders: the old gold */
    --ec-accent-hover: #B89A5F;
    --ec-ink: #0F0E0C;
    --ec-body: #3B3931;
    --ec-body-muted: #55524B;
    --ec-line: #E2DFD8;
    --ec-line-soft: #EDEAE3;
    --ec-panel: #F7F6F3;
    --ec-panel-2: #F4F3F1;
    --ec-max: 1240px;
}
body.bsmc-events-calendar-body {
    margin: 0;
    padding: 0;
    background: #FFFFFF !important;  /* beats body.bsmc-mhome dark bg if inherited */
    color: var(--ec-ink);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
body.bsmc-events-calendar-body * { box-sizing: border-box; }
body.bsmc-events-calendar-body img { max-width: 100%; display: block; }
html body.bsmc-events-calendar-body a:hover { color: var(--ec-accent); }

/* Kill any BB chrome that could leak past the standalone template. */
body.bsmc-events-calendar-body .buddypanel,
body.bsmc-events-calendar-body .site-header,
body.bsmc-events-calendar-body .site-footer,
body.bsmc-events-calendar-body #wpadminbar,
body.bsmc-events-calendar-body .bb-header-buttons { display: none !important; }
body.bsmc-events-calendar-body { padding-top: 0 !important; }

/* Top nav is now the shared home3-header template part — its styles
   live in assets/css/home-public.css + assets/css/home3.css. Nothing
   to declare here. */

/* ─── 2 · Dark page header ───────────────────────────────────── */
.bsmc-ec-header {
    background: var(--ec-ink);
    color: #FFFFFF;
}
.bsmc-ec-header__inner {
    max-width: var(--ec-max);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 40px) clamp(36px, 4vw, 52px);
}
.bsmc-ec-header__kicker {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ec-accent) !important;
}
.bsmc-ec-header__title {
    margin: 0 0 20px;
    font-size: clamp(48px, 7.5vw, 104px);
    line-height: 0.9;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
.bsmc-ec-header__body {
    margin: 0;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78) !important;
    text-wrap: pretty;
}

/* ─── 3 · Filter chip row (sticky under shared nav) ───────────
   Shared mhome header sits at top:0 with z-index 40 (per home3.css
   .bsmc-mhome__header). Chip row sticks below it — offset roughly
   matches the header's rendered height (28px padding + ~64px logo
   + 28px padding on desktop; smaller on mobile per home-public.css
   mobile rule). Small overlap with the logo is acceptable — the
   header is opaque black so nothing bleeds through visually. */
.bsmc-ec-filters {
    position: sticky;
    top: 96px;
    z-index: 30;
    background: #FFFFFF;
    border-bottom: 1px solid var(--ec-line);
}
.bsmc-ec-filters__inner {
    max-width: var(--ec-max);
    margin: 0 auto;
    padding: 18px clamp(20px, 4vw, 40px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.bsmc-ec-filters__sep {
    display: inline-block;
    width: 1px;
    height: 24px;
    background: var(--ec-line);
    margin: 0 4px;
}
.bsmc-ec-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    letter-spacing: 0.12em;
    padding: 11px 22px;
    cursor: pointer;
    border: 1px solid var(--ec-ink);
    background: #FFFFFF;
    color: var(--ec-ink) !important;
    -webkit-text-fill-color: var(--ec-ink) !important;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
    text-transform: uppercase;
}
.bsmc-ec-chip:hover { background: var(--ec-panel); color: var(--ec-ink) !important; -webkit-text-fill-color: var(--ec-ink) !important; }
.bsmc-ec-chip.is-on {
    background: var(--ec-ink);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
.bsmc-ec-chip__count { opacity: 0.72;   /* 0.55 read at 4.3:1 on white */ margin-left: 4px; font-size: 12px; letter-spacing: 0.08em; }
.bsmc-ec-chip.is-on .bsmc-ec-chip__count { opacity: 0.75; }
.bsmc-ec-chip--cat { font-size: 14px; padding: 9px 16px; letter-spacing: 0.08em; }

@media (max-width: 640px) {
    /* Shared mhome header on mobile: 18px + 64px logo + 18px = 100 */
    .bsmc-ec-filters { top: 100px; }
    .bsmc-ec-filters__inner { padding: 12px clamp(16px, 4vw, 24px); gap: 8px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .bsmc-ec-filters__sep { flex-shrink: 0; }
    .bsmc-ec-chip { flex-shrink: 0; font-size: 15px; padding: 9px 15px; }
    .bsmc-ec-chip--cat { font-size: 12px; padding: 7px 12px; }
}

/* ─── 4 · Event grid ─────────────────────────────────────────── */
.bsmc-ec-grid-section {
    max-width: var(--ec-max);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 40px) clamp(72px, 9vw, 120px);
}
.bsmc-ec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
}

.bsmc-ec-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ec-line);
    background: #FFFFFF;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.bsmc-ec-card:hover { border-color: rgba(161, 138, 85, 0.7); }
.bsmc-ec-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ec-panel-2);
    display: block;
}
.bsmc-ec-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.bsmc-ec-card:hover .bsmc-ec-card__media img { transform: scale(1.03); }
.bsmc-ec-card__city {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--ec-ink);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 13px;
    letter-spacing: 0.16em;
    padding: 6px 11px;
    line-height: 1.2;
}
.bsmc-ec-card__body {
    padding: 24px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 14px;
    min-width: 0;
}
.bsmc-ec-card__head { min-width: 0; }
.bsmc-ec-card__title {
    margin: 0 0 6px;
    font-size: 30px;
    line-height: 1.02;
    letter-spacing: 0.01em;
    color: var(--ec-ink) !important;
    -webkit-text-fill-color: var(--ec-ink) !important;
    word-wrap: break-word;
}
.bsmc-ec-card__title a { color: inherit !important; -webkit-text-fill-color: inherit !important; }
.bsmc-ec-card__title a:hover { color: var(--ec-accent) !important; -webkit-text-fill-color: var(--ec-accent) !important; }
/* Description under the title. Left as body-text (black, sentence case)
   because admins tend to write a full sentence here rather than a short
   gold label — the design mockup showed a short caps kicker, but real
   copy has been running long. */
.bsmc-ec-card__subtitle {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ec-ink) !important;
    -webkit-text-fill-color: var(--ec-ink) !important;
}
.bsmc-ec-card__facts {
    margin: 0;
    padding: 14px 0 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-top: 1px solid var(--ec-line-soft);
}
.bsmc-ec-card__facts li {
    display: flex;
    gap: 10px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--ec-body);
}
.bsmc-ec-card__facts li > span:first-child { color: var(--ec-accent); }

.bsmc-ec-card__ctas {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* ─── 5 · Buttons (card + footer) ─────────────────────────────
   `border-radius: 0 !important` is deliberate — BuddyBoss parent theme
   applies a rounded pill radius to every <button>/<a class="button"> via
   its global button styles, which was leaving the Add-to-Calendar icon
   square looking rounded even though the design is hard-cornered. */
.bsmc-ec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 10px;
    font-size: 17px;
    letter-spacing: 0.1em;
    line-height: 1;
    border: 1px solid var(--ec-ink);
    border-radius: 0 !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-align: center;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}
.bsmc-ec-btn--primary {
    background: var(--ec-ink);
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
.bsmc-ec-btn--primary:hover { background: var(--ec-accent-fill); color: var(--ec-ink) !important; -webkit-text-fill-color: var(--ec-ink) !important; border-color: var(--ec-accent-fill); }
.bsmc-ec-btn--ghost {
    background: #FFFFFF;
    color: var(--ec-ink) !important;
    -webkit-text-fill-color: var(--ec-ink) !important;
}
.bsmc-ec-btn--ghost:hover { background: var(--ec-ink); color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
/* Icon-only Add-to-Calendar button. Height comes from stretching to
   match its siblings via the .bsmc-ec-addcal wrapper below — never
   set an explicit height here or the icon square drifts out of sync
   with the two text buttons whenever their line-height changes. */
.bsmc-ec-btn--icon {
    padding: 0;
    background: #FFFFFF;
    color: var(--ec-ink) !important;
    -webkit-text-fill-color: var(--ec-ink) !important;
    width: 100%;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
}
.bsmc-ec-btn--icon:hover { background: var(--ec-ink); color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
.bsmc-ec-btn--icon svg { flex-shrink: 0; }
.bsmc-ec-btn--lg { padding: 15px 34px; font-size: 19px; flex: 0 0 auto; }

/* ─── 6 · Add-to-Calendar dropdown ─────────────────────────────
   Wrapper is a fixed-width flex item; align-self: stretch pins its
   height to whatever the two text buttons resolve to, so the icon
   square is always exactly as tall as its siblings even when the CTA
   labels wrap onto two lines. */
.bsmc-ec-addcal {
    position: relative;
    flex: 0 0 50px;
    width: 50px;
    align-self: stretch;
    display: flex;
}
.bsmc-ec-addcal__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #FFFFFF;
    border: 1px solid var(--ec-line);
    padding: 8px 0;
    z-index: 30;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.bsmc-ec-addcal__menu a {
    display: block;
    padding: 10px 16px;
    color: var(--ec-ink) !important;
    -webkit-text-fill-color: var(--ec-ink) !important;
    font-size: 15px;
    font-weight: 500;
}
.bsmc-ec-addcal__menu a:hover { background: var(--ec-panel); color: var(--ec-accent) !important; -webkit-text-fill-color: var(--ec-accent) !important; }
.bsmc-ec-addcal__menu[hidden] { display: none; }

/* Empty state */
.bsmc-ec-empty {
    margin: 40px 0 0;
    font-size: 26px;
    letter-spacing: 0.06em;
    color: var(--ec-body-muted) !important;
}
.bsmc-ec-empty a {
    color: var(--ec-accent) !important;
    -webkit-text-fill-color: var(--ec-accent) !important;
    border-bottom: 1px solid var(--ec-accent-fill);
    padding-bottom: 2px;
    margin-left: 6px;
}

/* Footer is now the shared home3-footer template part — styles live in
   assets/css/home3.css. Nothing to declare here. */