/* =========================================================
   styleLogo.css -- THE BodySleepMind logo, everywhere. 3 Oct 2026.
   Markup: menus/bsm_logo.php -> bsm_logo_html( 'mark' | 'title' | 'tagline' ).
   Loaded on every page by functions.php (the logo can appear anywhere).
   Every value is a --bsm3-* var; the logo's own colours and sizes are the
   --bsm3-logo-* vars, edited on the Brand CRUD's Logo tab.
   Pages can resize a logo by overriding --bsm3-logo-* inside their own
   scope -- never by hard-coding a size.
   ========================================================= */
.bsm-logo { display: inline-flex; align-items: center; gap: var(--bsm3-space-sm); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); white-space: nowrap; }
.bsm-logo .bsm-logo-mark { display: inline-block; flex: 0 0 auto; width: var(--bsm3-logo-mark-use-on-logo); height: var(--bsm3-logo-mark-use-on-logo); }
.bsm-logo .bsm-logo-text { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.bsm-logo .bsm-logo-title { font-family: var(--bsm3-font-heading); font-size: var(--bsm3-logo-title-use-on-logo); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
.bsm-logo .bsm-logo-tagline { font-family: var(--bsm3-font-body); font-size: var(--bsm3-logo-strapline-use-on-logo); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); }
/* the three gradient circles */
.bsm-logo-mark .bsm-logo-body-centre  { stop-color: var(--bsm3-logo-body-centre-use-on-logo); }
.bsm-logo-mark .bsm-logo-body-edge    { stop-color: var(--bsm3-logo-body-edge-use-on-logo); }
.bsm-logo-mark .bsm-logo-sleep-centre { stop-color: var(--bsm3-logo-sleep-centre-use-on-logo); }
.bsm-logo-mark .bsm-logo-sleep-edge   { stop-color: var(--bsm3-logo-sleep-edge-use-on-logo); }
.bsm-logo-mark .bsm-logo-mind-centre  { stop-color: var(--bsm3-logo-mind-centre-use-on-logo); }
.bsm-logo-mark .bsm-logo-mind-edge    { stop-color: var(--bsm3-logo-mind-edge-use-on-logo); }

/* Brand CRUD, Logo tab: the three previews side by side */
.bcc-logo-previews { display: flex; flex-wrap: wrap; gap: var(--bsm3-space-lg); margin: var(--bsm3-space-lg) 0 var(--bsm3-space-xl); }
.bcc-logo-preview { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bsm3-space-md); padding: var(--bsm3-space-xl); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); border-radius: var(--bsm3-radius-primary-cards); }
.bcc-logo-preview-label { font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); }
.bcc-logo-save-btn { margin-top: var(--bsm3-space-md); }