/* ==========================================================================
   CleverPunts design system - members area bridge
   ==========================================================================

   Loaded by members/cp-theme.php after the site's cp-*.css sheets, and only
   when the theme is on. It does for user.css (and the inline <style> blocks
   on change-password.php and premium-content.php) what cp-page-bridge.css
   does for the public pages: restates every theme-blind declaration under
   .cp on the tokens. user.css itself is not edited - it is what a visitor
   still gets - and, unlike the generated bridge, this file is written by
   hand, so judgement calls live here too.

   The rules are grouped as user.css is, so a change there can be found here.
   Every selector carries .cp, which puts it at (0,2,0) or better against the
   (0,1,0) originals; the handful that need more are noted.
   ========================================================================== */

/* --- Page frame --------------------------------------------------------- */
/* The legacy pages are a navbar and a .container. With the theme on there is
   a sticky site header above and a one-line footer below, so the body is a
   column and the footer is pushed to the foot of short pages (login, verify)
   rather than floating mid-screen. */

body.cp {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.cp > .cp-foot { margin-top: auto; }

/* The legacy navbar carried mb-4 and the pages start flush beneath it. The
   subnav has no margin of its own, so the content block takes the gap - and
   one before the footer, which the legacy pages never had. */
body.cp > #main { padding-block: var(--cp-space-5) var(--cp-space-6); }

/* Bootstrap's .container on the same measure as the header's .cp-wrap, so
   the content lines up with the brand and the menu above it. */
.cp .container {
    max-width: var(--cp-measure);
    padding-inline: var(--cp-gutter);
}

@media (max-width: 600px) {
    .cp .container { padding-inline: 20px; }
}

/* The auth pages: user.css makes body.login a flex ROW that centres its one
   child vertically, and paints a green gradient behind it in light mode. As
   a row the header, card and footer would sit side by side. Stay a column;
   the card keeps its vertical centring through auto block margins. */
body.cp.login {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: var(--cp-bg);
}

body.cp.login > .container {
    margin-block: auto;
    padding-block: var(--cp-space-6);
}

/* --- Type --------------------------------------------------------------- */
/* cp-base sizes h1 for a landing-page hero (42-78px). Every h1 here is a page
   title or a card heading, so it takes the .cp-pagehead size instead, and h2
   comes down with it. Bootstrap's accordion heading is an h2 whose margin
   must stay zero or the FAQ items drift apart. */

.cp h1 {
    font-size: clamp(30px, 3.4vw, 44px);
    letter-spacing: var(--cp-track-h2);
    margin: 0 0 var(--cp-space-4);
    max-width: none;
}

.cp h2 {
    font-size: clamp(22px, 2.4vw, 28px);
    margin-bottom: var(--cp-space-4);
}

.cp .card h2,
.cp .card-header h3 { font-size: var(--cp-text-lg); }

.cp .accordion-header { margin-bottom: 0; }

/* subscription.php sets its title and standfirst .text-light, written when
   the page was only ever dark. Nothing in the members area pairs .text-light
   with .bg-white, so here it can simply follow the ink. !important because
   Bootstrap's text utilities carry one. */
.cp .text-light { color: var(--cp-ink) !important; }

/* The legacy wordmark on the signup title: CCZoinks, white, drop-shadowed.
   Under the theme it is plain heading text with the accent on "Punter". */
.cp .logo-brand {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-shadow: none;
    transform: none;
}

.cp .logo-brand span,
.cp .logo-accent { color: var(--cp-accent-ink); }

/* --- Tables ------------------------------------------------------------- */
/* cp-base draws a border on every cell; the account table on the dashboard
   is .table-borderless and should stay that way. Values take the ink - the
   labels beside them are .text-muted already. */
.cp .table-borderless th,
.cp .table-borderless td { border: 0; }

.cp .table td { color: var(--cp-ink); }

/* --- Auth cards (login, register, forgot, reset, verify) ---------------- */
/* user.css paints these per data-bs-theme: white or #0a0a0a / #1a1a1a. One
   surface, one border, both themes. */
.cp .login-card,
.cp .register-card,
.cp .reset-card,
.cp .verify-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow);
}

/* The banner across the top of an auth card: a charcoal gradient with white
   text. The hero scrim, which is dark in dark and pale in light, with the
   ink over it either way. */
.cp .brand-header {
    background: linear-gradient(135deg, var(--cp-hero-from), var(--cp-hero-mid));
    color: var(--cp-ink);
    border-bottom: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-lg) var(--cp-radius-lg) 0 0;
}

.cp .brand-header h1 {
    font-size: var(--cp-text-h2);
    margin-bottom: var(--cp-space-2);
}

.cp .brand-header p { color: var(--cp-muted); }

.cp .success-icon { color: var(--cp-ok); }
.cp .error-icon   { color: var(--cp-bad); }

/* --- Buttons and controls ------------------------------------------------ */
/* user.css gives .btn-primary a green gradient, a lift on hover and no
   border - direct properties, so the --bs-btn-* bridge in cp-components.css
   never gets a look in. Stated outright: the accent fill, dark ink, and no
   lift - nothing else in the system moves on hover. (0,3,0) on the hover to
   beat user.css's (0,2,0). */
.cp .btn-primary {
    background: var(--cp-accent);
    border: 1px solid var(--cp-accent);
    color: var(--cp-on-accent);
}

.cp .btn-primary:hover,
.cp .btn-primary:focus-visible {
    background: var(--cp-accent);
    border-color: var(--cp-accent-line);
    color: var(--cp-on-accent);
    transform: none;
    box-shadow: none;
}

/* The outline variants are Bootstrap blue in both themes; on the accent
   like everything else. */
.cp .btn-outline-primary {
    --bs-btn-color:               var(--cp-accent-ink);
    --bs-btn-border-color:        var(--cp-accent-line);
    --bs-btn-hover-bg:            var(--cp-accent);
    --bs-btn-hover-border-color:  var(--cp-accent);
    --bs-btn-hover-color:         var(--cp-on-accent);
    --bs-btn-active-bg:           var(--cp-accent);
    --bs-btn-active-border-color: var(--cp-accent);
    --bs-btn-active-color:        var(--cp-on-accent);
}

/* The focus ring was a literal indigo. */
.cp .form-control:focus,
.cp .form-select:focus {
    border-color: var(--cp-accent-line);
    box-shadow: 0 0 0 0.25rem rgba(var(--cp-accent-rgb), 0.25);
}

/* --- Feature lists (register, signup, subscription) --------------------- */
/* Declared twice in user.css: white-alpha text for the register card, then
   dark text on grey hairlines for the pricing cards. */
.cp .feature-list li {
    color: var(--cp-muted);
    border-bottom-color: var(--cp-line);
}

.cp .feature-list i    { color: var(--cp-accent-ink); }
.cp .feature-list span { color: var(--cp-ink); }

/* --- Dashboard ---------------------------------------------------------- */

.cp .content-card,
.cp .stat-card {
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-lg);
    box-shadow: none;
}

.cp .stat-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--cp-accent-line);
}

/* The welcome banner (dashboard, support): a green gradient with white text,
   on the hero scrim like the auth banner. */
.cp .welcome-hero {
    background: linear-gradient(135deg, var(--cp-hero-from), var(--cp-hero-mid));
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-lg);
    color: var(--cp-ink);
}

.cp .welcome-hero h1 { margin-bottom: var(--cp-space-3); }
.cp .welcome-hero .lead { color: var(--cp-muted); }

/* The membership pill in the banner: a white tint (invisible on a pale
   ground, with Bootstrap's white badge text over it). An ink tint instead. */
.cp .welcome-hero .badge-custom {
    background: rgba(var(--cp-ink-rgb), 0.1);
    border: 1px solid var(--cp-line);
    color: var(--cp-ink);
}

/* The four stat icons carried four gradients - indigo, green, cyan, amber -
   with white glyphs. One accent tint; the categories were decorative. */
.cp .stat-icon {
    background: var(--cp-accent-dim);
    border: 1px solid var(--cp-accent-line);
    color: var(--cp-accent-ink);
}

/* --- Pricing (signup, subscription) ------------------------------------- */

.cp .pricing-card {
    border-color: var(--cp-line);
    box-shadow: none;
}

.cp .pricing-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--cp-accent-line);
}

.cp .pricing-card.featured {
    border-color: var(--cp-accent-line);
    box-shadow: none;
}

/* (0,4,0): user.css declares this one per data-bs-theme at (0,3,0). */
.cp .card.pricing-card.current-plan { background: var(--cp-accent-dim); }

.cp .price-tag { color: var(--cp-accent-ink); }

/* The corner ribbons. Both carry .text-white in the markup, which the
   components bridge turns into ink - near-white in dark, so on a lime fill
   that is 1.3:1. State the ink on each, at the bridge's own !important.
   POPULAR is the accent fill; TRIAL is a status outline, like .cp-badge--bad,
   because --cp-bad is pale pink in dark and would need a different ink. */
.cp .badge-featured {
    background: var(--cp-accent);
    color: var(--cp-on-accent) !important;
}

.cp .badge-trial {
    background: var(--cp-surface);
    border: 1px solid var(--cp-bad);
    color: var(--cp-bad) !important;
}

/* --- premium-content.php (inline styles) -------------------------------- */

.cp .hero-section {
    background: linear-gradient(135deg, var(--cp-hero-from), var(--cp-hero-mid));
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-lg);
    color: var(--cp-ink);
}

.cp .hero-section .lead { color: var(--cp-muted); }

.cp .badge-premium {
    background: var(--cp-accent);
    color: var(--cp-on-accent) !important;
}

.cp .level-badge {
    background: var(--cp-accent-dim);
    border: 1px solid var(--cp-accent-line);
    color: var(--cp-accent-ink);
}

.cp .code-block {
    background: var(--cp-surface-2);
    border: 1px solid var(--cp-line);
    color: var(--cp-ink);
    font-family: var(--cp-font-mono);
}

.cp .feature-box {
    background: var(--cp-surface-2);
    border-left-color: var(--cp-accent-line);
}

.cp .content-card.border-primary { border-color: var(--cp-accent-line) !important; }

/* --- manage-subscription.php -------------------------------------------- */
/* The subscription card's header is bg-primary text-white: Bootstrap blue
   with the bridge's ink over it, which in dark is fine and in light is dark
   text on blue. A themed panel head instead. */
.cp .card-header.bg-primary {
    background-color: var(--cp-surface-2) !important;
    border-bottom: 1px solid var(--cp-line);
    color: var(--cp-ink) !important;
}

/* The empty-state inbox icon was a literal light grey. */
.cp .card-body .bi-inbox { color: var(--cp-line) !important; }