/* ============================================================================
   BPS LITE — DESIGN FLAVOURS
   Added 0.7.18, 2026-09-14.
   Plan: dev/plans/2026-09-14-PLAN-design-flavours-hook-classes-pilot.md
   Base twin: moa-bps-base/assets/scss/_bps-flavours.scss (keep the two in step).

   🔴 THE ONE RULE: a hook class carries NO bare CSS. There is no `.bps-card { }`
   in this file. Every rule is scoped to a body class, so a site that chooses no
   flavour still gets the default paint (body.bps-lite) and a site that chooses
   one gets the override (body.bps-flavour-*). A bare rule would paint the
   element regardless of the choice and could not be turned back off.

   🔴 THIS FILE FIXES A LIVE DEFECT, not just a new feature.
   .bps-card is written into 7 shipped Lite sections (24 uses) and, through the
   moulds, onto 168 containers across 15 live blogs on lite.buildprosites.com —
   and NO Lite stylesheet has ever painted it. Measured 2026-09-14 with
   dev/bps-tools/elementor/measure-decorator-usage.php. Every one of those cards
   has been rendering as a bare div. The body.bps-lite block below is the first
   time they get their surface. That is also why this file is safe: it adds paint
   where there was none, so nothing that currently looks right can change.

   🔴 SPECIFICITY IS A TIE; SOURCE ORDER DECIDES. body.bps-lite .bps-card and
   body.bps-flavour-soft-rounded .bps-card are BOTH (0,2,1). The flavour blocks
   come after the defaults in this same file, which is the only reason they win.
   This file is also enqueued LAST, after utilities, for the same reason.
   ========================================================================= */


/* ========================================================================
   LAYER 1 — DEFAULTS. Mirrors moa-bps-base's default card/badge so that a page
   built on the free tier keeps its shapes after an upgrade to Base. The values
   are the ones Base carried as bare-class paint until 2026-09-14.
   ======================================================================== */

body.bps-lite .bps-card {
    background: var(--bg, #fff);
    color: var(--text-color, #212529);
    border: 1px solid var(--bps-border-color, var(--border-color, #dee2e6));
    border-radius: 2px;
    padding: 1.75rem 1.625rem;
    display: flex;
    flex-direction: column;
}

body.bps-lite .bps-card-accent-top    { border-top:    3px solid var(--accent); }
body.bps-lite .bps-card-accent-left   { border-left:   3px solid var(--accent); }
body.bps-lite .bps-card-accent-right  { border-right:  3px solid var(--accent); }
body.bps-lite .bps-card-accent-bottom { border-bottom: 3px solid var(--accent); }

body.bps-lite .bps-card-featured {
    border: 1px solid var(--accent);
}

body.bps-lite .bps-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--accent-text, #fff);
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
}


/* ========================================================================
   LAYER 2 — FLAVOURS. Shape only: radius, border weight, shadow, flatness.
   A flavour never assigns a brand colour — two sites on one flavour must still
   look like two different businesses.
   ======================================================================== */

/* ---- soft-rounded: generous radii, diffuse shadow, no hard borders ------- */

body.bps-flavour-soft-rounded .bps-card {
    border: none;
    border-radius: 20px;
    padding: 2rem 1.875rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

body.bps-flavour-soft-rounded .bps-card-accent-top    { border-top:    4px solid var(--accent); border-radius: 20px; }
body.bps-flavour-soft-rounded .bps-card-accent-left   { border-left:   4px solid var(--accent); border-radius: 0 20px 20px 0; }
body.bps-flavour-soft-rounded .bps-card-accent-right  { border-right:  4px solid var(--accent); border-radius: 20px 0 0 20px; }
body.bps-flavour-soft-rounded .bps-card-accent-bottom { border-bottom: 4px solid var(--accent); border-radius: 20px; }

body.bps-flavour-soft-rounded .bps-card-featured {
    border: 2px solid var(--accent);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
}

body.bps-flavour-soft-rounded .bps-badge {
    border-radius: 999px;
    padding: 3px 12px;
}

/* ---- neubrutalism: heavy ink borders, hard offset shadows, zero radius ---- */

body.bps-flavour-neubrutalism .bps-card {
    border: 3px solid var(--text-color, #111);
    border-radius: 0;
    box-shadow: 6px 6px 0 var(--text-color, #111);
    padding: 1.75rem 1.5rem;
}

body.bps-flavour-neubrutalism .bps-card-accent-top    { border-top:    8px solid var(--accent); }
body.bps-flavour-neubrutalism .bps-card-accent-left   { border-left:   8px solid var(--accent); }
body.bps-flavour-neubrutalism .bps-card-accent-right  { border-right:  8px solid var(--accent); }
body.bps-flavour-neubrutalism .bps-card-accent-bottom { border-bottom: 8px solid var(--accent); }

body.bps-flavour-neubrutalism .bps-card-featured {
    border: 3px solid var(--accent);
    box-shadow: 6px 6px 0 var(--accent);
}

body.bps-flavour-neubrutalism .bps-badge {
    border-radius: 0;
    border: 2px solid var(--text-color, #111);
    padding: 2px 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    body.bps-flavour-soft-rounded .bps-card { border-radius: 14px; }

    body.bps-flavour-neubrutalism .bps-card          { box-shadow: 4px 4px 0 var(--text-color, #111); }
    body.bps-flavour-neubrutalism .bps-card-featured { box-shadow: 4px 4px 0 var(--accent); }
}