/**
 * BSMC Membership Pricing — page-membership-pricing.php
 *
 * Dark ground, Bebas display, gold accent — same language as home3 /
 * clubhouse / adventures. Chrome-light: no nav, minimal footer.
 *
 * The layout does one job: make the annual tier obviously the better deal
 * without making the monthly tier look like a punishment. Annual gets the
 * gold border, the raised card, the badge and the saving line; monthly gets
 * an honest, equally legible card whose pitch is flexibility.
 *
 * Font note: 'Montserrat' for body, Bebas for display. Barlow is NOT in the
 * stack anywhere — see the sitewide correction on 2026-08-20.
 */

/* ─── Font + heading reclaim ──────────────────────────────────────
   Same pattern as the other marketing stylesheets: the child's inline
   sitewide sheet forces Montserrat on labels and Bebas on buttons, and the
   parent theme's late stylesheet fights heading colours. Restate here so
   this page doesn't depend on which rule wins. */
body.bsmc-pricing-body,
html body.bsmc-pricing-body p,
html body.bsmc-pricing-body a,
html body.bsmc-pricing-body div,
html body.bsmc-pricing-body li,
html body.bsmc-pricing-body ul,
html body.bsmc-pricing-body span {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
html body.bsmc-pricing-body h1,
html body.bsmc-pricing-body h2,
html body.bsmc-pricing-body .bsmc-tier__amount,
html body.bsmc-pricing-body .bsmc-tier__cta {
    font-family: 'Bebas Neue', Impact, 'Oswald', sans-serif !important;
    /* Bebas ships weight 400 only — asking for more makes the browser fake
       a bold or drop to the next family. */
    font-weight: 400 !important;
}
html body.bsmc-pricing-body a { text-decoration: none !important; }

/* ─── Tokens ──────────────────────────────────────────────────────── */
:root {
    --pr-ink: #0e0e0e;
    --pr-panel: #141312;
    --pr-paper: #edeadf;
    --pr-muted: rgba(237, 234, 223, 0.62);
    --pr-line: rgba(237, 234, 223, 0.14);
    --pr-gold: #C8A96E;
    --pr-gold-hi: #DFC08A;
    --pr-max: 1080px;
}

body.bsmc-pricing-body {
    margin: 0;
    padding: 0;
    background: var(--pr-ink) !important;
    color: var(--pr-paper);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    /* Push the footer down on short pages. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.bsmc-pricing-body * { box-sizing: border-box; }

/* ─── Header (logo only) ──────────────────────────────────────────── */
.bsmc-pricing-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 26px 20px;
    border-bottom: 1px solid var(--pr-line);
}
.bsmc-pricing-header__logo img { display: block; height: 46px; width: auto; }
.bsmc-pricing-header__logo span {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 26px;
    letter-spacing: 0.2em;
    color: var(--pr-paper);
}

/* ─── Intro ───────────────────────────────────────────────────────── */
.bsmc-pricing { flex: 1 0 auto; }
.bsmc-pricing__inner {
    max-width: var(--pr-max);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 76px) clamp(20px, 4vw, 40px) clamp(48px, 6vw, 80px);
}
.bsmc-pricing__intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(32px, 4vw, 52px);
}
.bsmc-pricing__kicker {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pr-gold) !important;
    -webkit-text-fill-color: var(--pr-gold) !important;
}
.bsmc-pricing__h1 {
    margin: 0 0 16px;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 0.92;
    letter-spacing: 0.01em;
    color: var(--pr-paper) !important;
    -webkit-text-fill-color: var(--pr-paper) !important;
    text-wrap: balance;
}
.bsmc-pricing__lede p {
    margin: 0;
    color: var(--pr-muted) !important;
    text-wrap: pretty;
}

/* ─── Tier grid ───────────────────────────────────────────────────── */
.bsmc-pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
    /* align-items:stretch (default) keeps both cards equal height so the
       CTAs line up even when one card has an extra bullet. */
}

.bsmc-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pr-panel);
    border: 1px solid var(--pr-line);
    padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 34px);
}

/* The annual card. Gold edge + lift + a faint gold wash: enough to read as
   the recommended option at a glance, without dimming its neighbour. */
.bsmc-tier--best {
    border-color: var(--pr-gold);
    background:
        linear-gradient(180deg, rgba(200, 169, 110, 0.09) 0%, rgba(200, 169, 110, 0) 320px),
        var(--pr-panel);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
@media (min-width: 760px) {
    /* Only lift on a real two-up layout — pointless once cards stack. */
    .bsmc-tier--best { transform: translateY(-10px); }
}

.bsmc-tier__flag {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pr-muted) !important;
    -webkit-text-fill-color: var(--pr-muted) !important;
}
.bsmc-tier--best .bsmc-tier__flag {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 12px;
    background: var(--pr-gold);
    color: var(--pr-ink) !important;
    -webkit-text-fill-color: var(--pr-ink) !important;
}

.bsmc-tier__name {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pr-paper) !important;
    -webkit-text-fill-color: var(--pr-paper) !important;
    /* Deliberately NOT Bebas: the product name sits under a huge Bebas
       price, and two display faces stacked fight each other. */
    font-family: 'Montserrat', sans-serif !important;
}

.bsmc-tier__price {
    margin: 0 0 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.bsmc-tier__amount {
    font-size: clamp(48px, 6vw, 68px);
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--pr-paper) !important;
    -webkit-text-fill-color: var(--pr-paper) !important;
}
.bsmc-tier--best .bsmc-tier__amount {
    color: var(--pr-gold) !important;
    -webkit-text-fill-color: var(--pr-gold) !important;
}
.bsmc-tier__period {
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--pr-muted) !important;
}

.bsmc-tier__saving {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--pr-gold) !important;
    -webkit-text-fill-color: var(--pr-gold) !important;
}
.bsmc-tier__saving span { font-weight: 500; }
.bsmc-tier__saving--muted {
    font-weight: 500;
    color: var(--pr-muted) !important;
    -webkit-text-fill-color: var(--pr-muted) !important;
}
.bsmc-tier__equiv {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--pr-muted) !important;
}
.bsmc-tier__blurb {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--pr-muted) !important;
    text-wrap: pretty;
}

.bsmc-tier__points {
    margin: 6px 0 26px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Pushes the CTA to the card's bottom edge so both CTAs align. */
    flex: 1 1 auto;
}
.bsmc-tier__points li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--pr-paper) !important;
}
.bsmc-tier__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 9px;
    height: 9px;
    border: 1px solid var(--pr-gold);
    transform: rotate(45deg);
}

/* ─── CTAs ────────────────────────────────────────────────────────── */
.bsmc-tier__cta {
    display: block;
    padding: 17px 22px;
    text-align: center;
    font-size: 19px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--pr-gold);
    border-radius: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bsmc-tier__cta--primary {
    background: var(--pr-gold);
    color: var(--pr-ink) !important;
    -webkit-text-fill-color: var(--pr-ink) !important;
}
.bsmc-tier__cta--primary:hover {
    background: var(--pr-gold-hi);
    border-color: var(--pr-gold-hi);
}
.bsmc-tier__cta--ghost {
    background: transparent;
    color: var(--pr-paper) !important;
    -webkit-text-fill-color: var(--pr-paper) !important;
    /* 0.45 alpha, not lower: a control's visible boundary needs 3:1 against
       its background to satisfy WCAG 1.4.11. */
    border-color: rgba(237, 234, 223, 0.45);
}
.bsmc-tier__cta--ghost:hover {
    border-color: var(--pr-paper);
    background: rgba(237, 234, 223, 0.06);
}
/* The gold CTA can't use a gold focus ring — gold on gold is 1:1 and
   invisible. Ink ring inside, paper ring outside so it reads either way. */
.bsmc-tier__cta--primary:focus-visible {
    outline: 3px solid var(--pr-ink);
    outline-offset: -6px;
    box-shadow: 0 0 0 2px var(--pr-paper);
}
.bsmc-tier__cta--ghost:focus-visible,
.bsmc-pricing-header__logo:focus-visible,
.bsmc-pricing-footer a:focus-visible {
    outline: 2px solid var(--pr-gold);
    outline-offset: 3px;
}

/* ─── Admin-only empty state ──────────────────────────────────────── */
.bsmc-pricing__empty {
    padding: 30px 32px;
    border: 1px dashed var(--pr-line);
    background: var(--pr-panel);
}
.bsmc-pricing__empty h2 {
    margin: 0 0 12px;
    font-size: 28px;
    color: var(--pr-paper) !important;
    -webkit-text-fill-color: var(--pr-paper) !important;
}
.bsmc-pricing__empty p { margin: 0; color: var(--pr-muted) !important; }

/* Admin-only currency warning. Loud on purpose: an unmapped membership
   charges in the wrong currency and nothing else on the page shows it. */
.bsmc-pricing__warn {
    margin: 0 0 28px;
    padding: 22px 26px;
    border: 1px solid #B3261E;
    background: rgba(179, 38, 30, 0.12);
}
.bsmc-pricing__warn h2 {
    margin: 0 0 10px;
    font-size: 20px;
    letter-spacing: 0.04em;
    color: #F2B8B5 !important;
    -webkit-text-fill-color: #F2B8B5 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}
.bsmc-pricing__warn p,
.bsmc-pricing__warn li { margin: 0 0 8px; font-size: 14px; color: var(--pr-paper) !important; }
.bsmc-pricing__warn ul { margin: 0 0 8px; padding-left: 20px; }
.bsmc-pricing__warn code {
    padding: 1px 5px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--pr-line);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

/* ─── Suppress BuddyBoss chrome that wp_footer() emits ────────────────
 * wp_footer() is required (scripts, consent banner), but BuddyBoss dumps its
 * moderation modals — report, block member, reported-content — into the
 * footer as plain markup. On a normal BB page its own stylesheet hides them
 * until opened; this template doesn't load that stylesheet, so they render
 * as a wall of radio buttons and "Please confirm you want to block this
 * member" underneath the pricing.
 *
 * bsmc-auth-pages.css used to hide these via `body.mepr-pro-template`, which
 * is why they were invisible before — but that sheet also blacked out the
 * whole page, so it is now correctly skipped here. Hiding them explicitly is
 * the right home for it: this template owns its own chrome. */
.bsmc-pricing-body .content-report-popup,
.bsmc-pricing-body .block-member-popup,
.bsmc-pricing-body .moderation-popup,
.bsmc-pricing-body #content-report,
.bsmc-pricing-body #block-member,
.bsmc-pricing-body #reported-content,
.bsmc-pricing-body #bbapp-title,
.bsmc-pricing-body .bb-onscreen-notification-enable,
.bsmc-pricing-body #wpadminbar,
.bsmc-pricing-body .buddypanel,
.bsmc-pricing-body #masthead,
.bsmc-pricing-body .site-header {
    display: none !important;
}
/* The admin bar reserves space via an html margin even when hidden. */
.bsmc-pricing-body,
html:has(body.bsmc-pricing-body) { margin-top: 0 !important; }

/* ─── Footer ──────────────────────────────────────────────────────── */
.bsmc-pricing-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--pr-line);
    padding: 26px 20px max(26px, env(safe-area-inset-bottom, 0px));
    text-align: center;
    font-size: 13px;
    color: var(--pr-muted);
}
.bsmc-pricing-footer p { margin: 0 0 8px; color: var(--pr-muted) !important; }
.bsmc-pricing-footer__links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.bsmc-pricing-footer a {
    color: var(--pr-paper) !important;
    -webkit-text-fill-color: var(--pr-paper) !important;
    border-bottom: 1px solid transparent;
}
.bsmc-pricing-footer a:hover {
    color: var(--pr-gold) !important;
    -webkit-text-fill-color: var(--pr-gold) !important;
    border-bottom-color: var(--pr-gold);
}

@media (prefers-reduced-motion: reduce) {
    .bsmc-tier--best { transform: none; }
    .bsmc-tier__cta { transition: none; }
}