/**
 * "Welcome to the club — download the app" banner on the MemberPress
 * profile sub-tab. Matches the brand typography: Bebas Neue headline,
 * Proxima Nova subhead, gold accent, cream text on dark.
 *
 * Also contains site-wide MemberPress text-color overrides — see the
 * `--*-color` overrides at the bottom of this file.
 */

/* ─── MemberPress legibility on dark theme ──────────────────────────────
 * Applies to every MP-rendered page: profile sub-tabs (mp-membership),
 * login/forgot-password/register/account/thank-you (mepr-page +
 * mepr-account-page + mp-forgot-password etc). MP and BB compose text
 * colors out of CSS custom properties, so overriding the vars once is
 * cleaner than chasing every `.mp_wrapper p`, `.mepr-account-table td`,
 * `.mp-account-row-label`, etc. Status pills aren't on these vars so
 * their green/red colors are preserved.
 *
 * This file is enqueued globally via wp_enqueue_scripts so it loads on
 * the login / forgot-password pages where the welcome banner does NOT
 * render and therefore can't inject inline styles. */
body.mp-membership,
body[class*="mepr-"],
body[class*="mp-forgot"],
body[class*="mp-account"],
body[class*="mp-checkout"],
body[class*="mp-thank-you"] {
    --bb-body-text-color: #edeadf;
    --bb-headings-color: #edeadf;
    --bb-alternate-text-color: #edeadf;
    --bb-content-background-color: transparent;
    --bb-content-alternate-background-color: rgba(255, 255, 255, 0.04);
    --bb-content-border-color: rgba(237, 234, 223, 0.12);
    --mpcs-body-text-color: #edeadf;
    --mpcs-headings-color: #edeadf;
    --mpcs-alternate-text-color: rgba(237, 234, 223, 0.7);
    --mpcs-content-background-color: transparent;
    --mpcs-content-alternate-background-color: rgba(255, 255, 255, 0.04);
    --mpcs-content-border-color: rgba(237, 234, 223, 0.12);
}

/* MemberPress's own stylesheet (mp-app.css) sets `color` with a hardcoded
 * hex on .mp_wrapper elements rather than via the CSS vars above. That's
 * why the var override alone didn't fix the forgot-password / login /
 * register pages — those pages don't load the BB ReadyLaunch CSS that
 * reads the vars. Direct color overrides scoped to the same MP body
 * classes catch every MP-rendered page. */
body.mp-membership .mp_wrapper,
body[class*="mepr-"] .mp_wrapper,
body[class*="mp-forgot"] .mp_wrapper,
body[class*="mp-account"] .mp_wrapper,
body[class*="mp-checkout"] .mp_wrapper,
body[class*="mp-thank-you"] .mp_wrapper {
    color: #edeadf !important;
}
body.mp-membership .mp_wrapper h1,
body.mp-membership .mp_wrapper h2,
body.mp-membership .mp_wrapper h3,
body.mp-membership .mp_wrapper h4,
body.mp-membership .mp_wrapper h5,
body[class*="mepr-"] .mp_wrapper h1,
body[class*="mepr-"] .mp_wrapper h2,
body[class*="mepr-"] .mp_wrapper h3,
body[class*="mepr-"] .mp_wrapper h4,
body[class*="mepr-"] .mp_wrapper h5,
body[class*="mp-forgot"] .mp_wrapper h1,
body[class*="mp-forgot"] .mp_wrapper h2,
body[class*="mp-forgot"] .mp_wrapper h3,
body[class*="mp-forgot"] .mp_wrapper h4,
body[class*="mp-forgot"] .mp_wrapper h5,
body[class*="mp-account"] .mp_wrapper h1,
body[class*="mp-account"] .mp_wrapper h2,
body[class*="mp-account"] .mp_wrapper h3,
body[class*="mp-account"] .mp_wrapper h4,
body[class*="mp-account"] .mp_wrapper h5,
body[class*="mp-checkout"] .mp_wrapper h1,
body[class*="mp-checkout"] .mp_wrapper h2,
body[class*="mp-checkout"] .mp_wrapper h3,
body[class*="mp-checkout"] .mp_wrapper h4,
body[class*="mp-checkout"] .mp_wrapper h5 {
    color: #edeadf !important;
}
body.mp-membership .mp_wrapper p,
body.mp-membership .mp_wrapper label,
body.mp-membership .mp_wrapper td,
body.mp-membership .mp_wrapper th,
body[class*="mepr-"] .mp_wrapper p,
body[class*="mepr-"] .mp_wrapper label,
body[class*="mepr-"] .mp_wrapper td,
body[class*="mepr-"] .mp_wrapper th,
body[class*="mp-forgot"] .mp_wrapper p,
body[class*="mp-forgot"] .mp_wrapper label,
body[class*="mp-forgot"] .mp_wrapper td,
body[class*="mp-forgot"] .mp_wrapper th,
body[class*="mp-account"] .mp_wrapper p,
body[class*="mp-account"] .mp_wrapper label,
body[class*="mp-account"] .mp_wrapper td,
body[class*="mp-account"] .mp_wrapper th,
body[class*="mp-checkout"] .mp_wrapper p,
body[class*="mp-checkout"] .mp_wrapper label,
body[class*="mp-checkout"] .mp_wrapper td,
body[class*="mp-checkout"] .mp_wrapper th {
    color: #edeadf !important;
}
/* Link color intentionally left to inherit the cream body color above
 * rather than forcing gold — gold links inside the login / forgot
 * password / sign-up forms were jarring and the user prefers them to
 * match the surrounding white text. */

/* Hide the right-hand "DETAILS" widget sidebar on all three mp-membership
 * sub-tabs (Info / Subscriptions / Payments). The membership area shows
 * Calvin's full profile info — duplicating it in the sidebar is noise.
 * Removing the secondary container lets .bb-rl-primary-container (flex: 1)
 * expand to fill the row. */
body.mp-membership .bb-rl-secondary-container,
body.mp-membership #bb-rl-right-panel,
body.mp-membership .bb-rl-right-panel,
body.mp-membership .bb-rl-widget-sidebar {
    display: none !important;
}

.bsmc-mp-welcome {
    background: #0e0e0e;
    border: 1px solid rgba(237, 234, 223, 0.12);
    border-radius: 16px;
    padding: 32px;
    margin: 0 0 32px;
    color: #edeadf;
}
.bsmc-mp-welcome__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}
.bsmc-mp-welcome__phone-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bsmc-mp-welcome__phone {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    object-fit: contain;
}
.bsmc-mp-welcome__copy {
    flex: 1 1 280px;
    min-width: 0;
    text-align: left;
}
.bsmc-mp-welcome__headline {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #edeadf;
    margin: 0 0 12px;
}
.bsmc-mp-welcome__subhead {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.15;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #C8A96E;
    margin: 0 0 22px;
}
.bsmc-mp-welcome__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.bsmc-mp-welcome__badge-link {
    display: inline-flex;
    line-height: 0;
}
.bsmc-mp-welcome__badge {
    height: 44px;
    width: auto;
    display: block;
}

/* Mobile — stack phone above text, center everything. */
@media (max-width: 640px) {
    .bsmc-mp-welcome { padding: 24px 20px; border-radius: 12px; }
    .bsmc-mp-welcome__inner { flex-direction: column; gap: 20px; }
    .bsmc-mp-welcome__copy { text-align: center; flex-basis: auto; }
    .bsmc-mp-welcome__badges { justify-content: center; }
    .bsmc-mp-welcome__phone { max-width: 180px; }
}