/*
 * CraftBook UK Magazine — Band Styles
 * ====================================
 * The two full-width "band" sections on the homepage — the Interactive Tools
 * strip and the Newsletter — can each be styled independently via the
 * Customiser as: Dark, Tinted, or Cream.
 *
 * HOW THIS WORKS
 * Previously both bands hardcoded ~13 white / rgba(255,255,255,x) values,
 * because they only ever sat on navy. That made them impossible to lighten:
 * white text on a light background simply disappears.
 *
 * Instead, every colour inside a band now reads from a SCOPED custom property
 * (--band-*). The variant class on the section sets those properties. One set
 * of markup, three appearances, no duplicated rules.
 *
 *     .cbm-band--dark    { --band-bg: navy;  --band-text: white; ... }
 *     .cbm-band--tinted  { --band-bg: pale;  --band-text: navy;  ... }
 *     .cbm-band--cream   { --band-bg: cream; --band-text: brown; ... }
 *
 * DARK MODE
 * A literal light colour would become a blinding slab in dark mode. So each
 * variant is redefined under [data-theme="dark"] to a dark surface that KEEPS
 * ITS CHARACTER — the cream variant stays warm, the tinted variant stays cool —
 * without ever being light. Never hardcode a light hex in a band.
 *
 * ACCESSIBILITY — every text/background pair below was measured, not eyeballed.
 * All meet WCAG AA (4.5:1 body, 3:1 large text). This also FIXED a pre-existing
 * failure: the amber CTA on the dark band's cards was 3.83:1. It now uses the
 * brighter amber (#E8A040), measuring 5.13:1.
 *
 * @package CraftBook_Magazine
 * @since   1.4.0
 */

/* ==========================================================================
   1. VARIANT: DARK  (navy — the original treatment)
   ========================================================================== */

.cbm-band--dark {
    --band-bg:                #1B2A4A;
    --band-text:              #FFFFFF;
    --band-text-muted:        #C3CBD6;
    --band-rule:              rgba(255, 255, 255, 0.15);

    --band-card-bg:           rgba(255, 255, 255, 0.06);
    --band-card-border:       rgba(255, 255, 255, 0.12);
    --band-card-hover-bg:     rgba(255, 255, 255, 0.12);
    --band-card-hover-border: rgba(255, 255, 255, 0.25);
    --band-card-shadow:       0 8px 24px rgba(0, 0, 0, 0.25);

    /* #E8A040 not #D4841A — the darker amber FAILED AA on the card surface. */
    --band-accent:            #E8A040;

    --band-badge-bg:          rgba(255, 255, 255, 0.12);
    --band-badge-text:        rgba(255, 255, 255, 0.85);

    --band-input-bg:          rgba(255, 255, 255, 0.08);
    --band-input-border:      rgba(255, 255, 255, 0.20);
    --band-input-placeholder: rgba(255, 255, 255, 0.40);

    --band-edge:              transparent;   /* No framing rule needed on dark */
    /* [v1.5.2] Amber reduced from 0.12 to 0.04. At 0.12 — and doubled by the
       duplicate layer removed from home.css — the warm cast read as a mauve
       wash across the left of the band. The teal is unchanged: it supplies the
       small amount of variation that stops the fill looking like flat paint. */
    --band-glow-1:            rgba(212, 132, 26, 0.04);
    --band-glow-2:            rgba(61, 122, 138, 0.10);
    --band-texture-opacity:   0;
}

/* ==========================================================================
   2. VARIANT: TINTED  (a pale, cool wash of the brand navy/teal)
   Light, but unmistakably a distinct band rather than more page.
   ========================================================================== */

.cbm-band--tinted {
    --band-bg:                #E9EFF3;
    --band-text:              #1B2A4A;   /* On-brand navy heading, 12.26:1 */
    --band-text-muted:        #4A5A6B;   /* 6.10:1 on band, 7.08:1 on card  */
    --band-rule:              rgba(27, 42, 74, 0.14);

    --band-card-bg:           #FFFFFF;   /* Cards float ON the tint */
    --band-card-border:       #CFDDE4;
    --band-card-hover-bg:     #FFFFFF;
    --band-card-hover-border: #9DBBC9;
    --band-card-shadow:       0 10px 26px rgba(27, 42, 74, 0.13);

    --band-accent:            #9C5D0D;   /* Darker amber — 4.54:1 / 5.27:1 */

    --band-badge-bg:          rgba(27, 42, 74, 0.08);
    --band-badge-text:        #33465F;

    --band-input-bg:          #FFFFFF;
    --band-input-border:      #C2D3DC;
    --band-input-placeholder: #7C8B99;

    /* A dark navy rule top and bottom — the "subtle dark element" that keeps
       the band from dissolving into the pale sections around it. */
    --band-edge:              rgba(27, 42, 74, 0.85);
    --band-glow-1:            rgba(61, 122, 138, 0.10);
    --band-glow-2:            rgba(27, 42, 74, 0.06);
    --band-texture-opacity:   0.05;
    --band-texture-colour:    %231B2A4A;
}

/* ==========================================================================
   3. VARIANT: CREAM  (warm, amber-tinted editorial panel)
   ========================================================================== */

.cbm-band--cream {
    --band-bg:                #FAF3E5;
    --band-text:              #2B2113;   /* 14.30:1 */
    --band-text-muted:        #6B5A41;   /* 6.01:1 on band, 6.64:1 on card */
    --band-rule:              rgba(43, 33, 19, 0.14);

    --band-card-bg:           #FFFFFF;
    --band-card-border:       #E8DCC4;
    --band-card-hover-bg:     #FFFFFF;
    --band-card-hover-border: #C9A96B;
    --band-card-shadow:       0 10px 26px rgba(90, 65, 25, 0.15);

    --band-accent:            #96560C;   /* 5.23:1 on band, 5.78:1 on card */

    --band-badge-bg:          rgba(150, 86, 12, 0.10);
    --band-badge-text:        #7A4A10;

    --band-input-bg:          #FFFFFF;
    --band-input-border:      #DCCBA9;
    --band-input-placeholder: #9C8A6C;

    --band-edge:              rgba(43, 33, 19, 0.75);
    --band-glow-1:            rgba(212, 132, 26, 0.14);
    --band-glow-2:            rgba(150, 86, 12, 0.06);
    --band-texture-opacity:   0.06;
    --band-texture-colour:    %238A6A28;
}

/* ==========================================================================
   4. DARK MODE — each variant keeps its CHARACTER but never becomes light.
   Cool variants stay cool; the cream variant stays warm.
   ========================================================================== */

[data-theme="dark"] .cbm-band--dark {
    --band-bg:                #1C2A43;   /* Lifted above the #0F1724 page */
    --band-text:              #F0ECE3;
    --band-text-muted:        #AAB4C2;
    --band-rule:              rgba(255, 255, 255, 0.12);
    --band-card-bg:           #26364F;
    --band-card-border:       rgba(255, 255, 255, 0.10);
    --band-card-hover-bg:     #2E4059;
    --band-card-hover-border: rgba(255, 255, 255, 0.22);
    --band-card-shadow:       0 10px 28px rgba(0, 0, 0, 0.45);
    --band-accent:            #E8A040;
    --band-badge-bg:          rgba(255, 255, 255, 0.10);
    --band-badge-text:        rgba(255, 255, 255, 0.82);
    --band-input-bg:          rgba(255, 255, 255, 0.06);
    --band-input-border:      rgba(255, 255, 255, 0.18);
    --band-input-placeholder: rgba(255, 255, 255, 0.38);
    --band-edge:              transparent;
    --band-texture-opacity:   0;
}

[data-theme="dark"] .cbm-band--tinted {
    --band-bg:                #162A33;   /* Cool, teal-leaning dark */
    --band-text:              #E6EEF1;
    --band-text-muted:        #9FB4BD;
    --band-rule:              rgba(255, 255, 255, 0.12);
    --band-card-bg:           #1F3742;
    --band-card-border:       rgba(255, 255, 255, 0.10);
    --band-card-hover-bg:     #264353;
    --band-card-hover-border: rgba(91, 168, 186, 0.45);
    --band-card-shadow:       0 10px 28px rgba(0, 0, 0, 0.45);
    --band-accent:            #E8A040;
    --band-badge-bg:          rgba(255, 255, 255, 0.10);
    --band-badge-text:        rgba(255, 255, 255, 0.82);
    --band-input-bg:          rgba(255, 255, 255, 0.06);
    --band-input-border:      rgba(255, 255, 255, 0.18);
    --band-input-placeholder: rgba(255, 255, 255, 0.38);
    --band-edge:              rgba(91, 168, 186, 0.55);
    --band-texture-opacity:   0.04;
    --band-texture-colour:    %235BA8BA;
}

[data-theme="dark"] .cbm-band--cream {
    --band-bg:                #2A2117;   /* Warm dark — keeps the cream character */
    --band-text:              #F2E9DA;
    --band-text-muted:        #BFAE94;
    --band-rule:              rgba(255, 255, 255, 0.12);
    --band-card-bg:           #362B1E;
    --band-card-border:       rgba(255, 255, 255, 0.10);
    --band-card-hover-bg:     #423528;
    --band-card-hover-border: rgba(232, 160, 64, 0.45);
    --band-card-shadow:       0 10px 28px rgba(0, 0, 0, 0.45);
    --band-accent:            #E8A040;
    --band-badge-bg:          rgba(232, 160, 64, 0.14);
    --band-badge-text:        #EBD9B8;
    --band-input-bg:          rgba(255, 255, 255, 0.06);
    --band-input-border:      rgba(255, 255, 255, 0.18);
    --band-input-placeholder: rgba(255, 255, 255, 0.38);
    --band-edge:              rgba(232, 160, 64, 0.5);
    --band-texture-opacity:   0.05;
    --band-texture-colour:    %23E8A040;
}

/* ==========================================================================
   5. SHARED BAND CHROME
   Applies to any element carrying .cbm-band, regardless of variant.
   ========================================================================== */

.cbm-band {
    background: var(--band-bg);
    position:   relative;
    overflow:   hidden;
    transition: background 0.25s ease;
}

/* The framing rules. Transparent on the dark variant (it doesn't need them);
   a crisp dark line on the light variants so the band stays a distinct object
   rather than dissolving into the pale sections above and below it. */
.cbm-band::after {
    content:        '';
    position:       absolute;
    left:           0;
    right:          0;
    top:            0;
    height:         3px;
    background:     var(--band-edge);
    pointer-events: none;
    z-index:        2;
}

.cbm-band--tinted,
.cbm-band--cream {
    border-bottom: 1px solid var(--band-edge);
}

/* Soft radial wash. Re-tuned per variant: on dark it glows, on light it is a
   gentle tonal shift rather than the muddy smear the dark-tuned version
   would have produced. */
.cbm-band__glow {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
    background-image:
        radial-gradient(circle at 15% 25%, var(--band-glow-1) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, var(--band-glow-2) 0%, transparent 50%);
}

/* Fine diagonal texture — only on the light variants, where a flat fill can
   look plasticky. Data-URI, so it costs no HTTP request. */
.cbm-band__texture {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
    opacity:        var(--band-texture-opacity, 0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6 L6 0' stroke='%231B2A4A' stroke-width='0.6'/%3E%3C/svg%3E");
    background-size: 6px 6px;
}

/* Keep real content above the decorative layers. */
.cbm-band > .cbm-container {
    position: relative;
    z-index:  1;
}

/* ==========================================================================
   6. TOOLS STRIP — now reads entirely from --band-* tokens
   ========================================================================== */

.cbm-tools-strip                          { background: var(--band-bg); }
.cbm-tools-strip .cbm-section-header      { border-bottom-color: var(--band-rule); }
.cbm-tools-strip .cbm-section-header__title { color: var(--band-text); }
.cbm-tools-strip__intro                   { color: var(--band-text-muted); }

.cbm-interactive-card {
    background:   var(--band-card-bg);
    border-color: var(--band-card-border);
    color:        var(--band-text);
}

.cbm-interactive-card:hover {
    background:   var(--band-card-hover-bg);
    border-color: var(--band-card-hover-border);
    box-shadow:   var(--band-card-shadow);
    color:        var(--band-text);
}

.cbm-interactive-card__title  { color: var(--band-text); }
.cbm-interactive-card__desc   { color: var(--band-text-muted); }
.cbm-interactive-card__icon   { color: var(--band-accent); }
.cbm-interactive-card__cta    { color: var(--band-accent); }

.cbm-interactive-card__badge {
    background: var(--band-badge-bg);
    color:      var(--band-badge-text);
}

/* Dark variant only: the badge carries its tool's category colour.
   Scoped at (0,2,0) so it beats the flat token rule above on specificity
   rather than on source order, in both light and dark mode.

   NOT applied to the Tinted or Cream variants. Their badges sit on white
   cards, where a category colour at 0.6 alpha becomes a pastel and the dark
   badge text drops to between 2.36:1 and 4.09:1 — below the 4.5:1 minimum.
   On the Dark band the same colours run 5.90:1 to 8.22:1.

   Colour follows the tool's 'category' key in tools-strip.php, never the
   badge label, so renaming a label in the Customiser cannot change or break
   its colour. The same key also drives the card's hover accent line
   (home.css) and hover icon colour (home-visual.css) — change a tool's
   category and all three move together, by design. */
.cbm-band--dark .cbm-interactive-card__badge--technology  { background: rgba( 27,  79, 114, 0.6); }
.cbm-band--dark .cbm-interactive-card__badge--business    { background: rgba( 29, 106,  58, 0.6); }
.cbm-band--dark .cbm-interactive-card__badge--creativity  { background: rgba(123,  63, 158, 0.6); }
.cbm-band--dark .cbm-interactive-card__badge--society     { background: rgba(158,  58,  47, 0.6); }
.cbm-band--dark .cbm-interactive-card__badge--interactive { background: rgba( 61, 122, 138, 0.6); }

/* The category-coloured hover accent line is retained in every variant —
   it is the "colourful element" that keeps the grid lively. On the light
   variants the category colours are strong enough to read cleanly. */

/* ==========================================================================
   7. NEWSLETTER — same token set
   ========================================================================== */

.cbm-newsletter                 { background: var(--band-bg); }
.cbm-newsletter__eyebrow        { color: var(--band-accent); }
.cbm-newsletter__heading        { color: var(--band-text); }
.cbm-newsletter__desc           { color: var(--band-text-muted); }
.cbm-newsletter__privacy        { color: var(--band-text-muted); }

.cbm-newsletter__form {
    background:   var(--band-input-bg);
    border-color: var(--band-input-border);
}
.cbm-newsletter__form:focus-within { border-color: var(--band-accent); }

.cbm-newsletter__input              { color: var(--band-text); }
.cbm-newsletter__input::placeholder { color: var(--band-input-placeholder); }

/* ==========================================================================
   8. FALLBACK
   If a band somehow renders without a variant class (e.g. a stale cached
   template), default to Dark rather than inheriting nothing and rendering
   white text on a white background. Fail visible, never invisible.
   ========================================================================== */

.cbm-tools-strip:not([class*="cbm-band--"]),
.cbm-newsletter:not([class*="cbm-band--"]) {
    --band-bg:          #1B2A4A;
    --band-text:        #FFFFFF;
    --band-text-muted:  #C3CBD6;
    --band-accent:      #E8A040;
    --band-card-bg:     rgba(255, 255, 255, 0.06);
    --band-card-border: rgba(255, 255, 255, 0.12);
    --band-badge-bg:    rgba(255, 255, 255, 0.12);
    --band-badge-text:  rgba(255, 255, 255, 0.85);
    --band-rule:        rgba(255, 255, 255, 0.15);
}