/**
 * Branwell Colour Energy Report — 2026 styling
 *
 * All colours, fonts, radii resolve through the shared theme palette
 * tokens defined in soulpath-website.css. The theme is required (no
 * fallback). The shared section-header partial is styled by the theme
 * — this file owns only the plugin's own components.
 */

/* The plugin is a full-page block. No horizontal padding or margin
   on desktop — the parent container (.entry, .section__inner, etc)
   takes control of width. On mobile, 10px left/right only, nothing else. */
.branwell-colourenergy {
    --bce-dark:    var(--color-text-strong, #1E3F7A);
    --bce-primary: var(--color-primary,     #4169A8);
    --bce-mid:     var(--color-mid,         #4169A8);
    --bce-light:   var(--color-soft,        #EBF0F8);
    --bce-border:  var(--color-border,      #C5D3E8);
    --bce-text:    var(--color-text,        #5a6a85);
    --bce-faint:   var(--color-text-faint,  #8a9ab5);

    --bce-radius:    12px;
    --bce-radius-sm: 8px;

    margin: 0;
    padding: 0;
    color: var(--bce-text);
    line-height: 1.6;
}
.branwell-colourenergy *,
.branwell-colourenergy *::before,
.branwell-colourenergy *::after { box-sizing: border-box; }
@media (max-width: 768px) {
    .branwell-colourenergy { padding: 0 10px; }
}

.bce-noscript {
    padding: 14px;
    background: #fdf2f2;
    border: 1px solid #f0c4c4;
    color: #8b1a1a;
    border-radius: var(--bce-radius-sm);
    font-size: 13.5px;
}


/* ══════════════════════════════════════════════════════════════
   Calculator card
   ══════════════════════════════════════════════════════════════ */
.bce-app { display: block; }

.bce-calc {
    background: #fff;
    border: 1px solid var(--bce-border);
    border-top: 3px solid var(--bce-primary);
    border-radius: 0 0 var(--bce-radius) var(--bce-radius);
    padding: 28px 32px 32px;
    margin: 0 0 2rem;
}
.bce-calc__head {
    margin: 0 0 1.5rem;
}
.bce-calc__title {
    font-size: 17px;
    font-weight: 500;
    color: var(--bce-dark);
    margin: 0 0 4px;
    letter-spacing: -0.005em;
}
.bce-calc__sub {
    font-size: 13px;
    color: var(--bce-text);
    margin: 0;
    line-height: 1.55;
}


/* ── Form fields ─────────────────────────────────────────── */
.bce-form__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    margin-bottom: 1.25rem;
}
.bce-field {
    min-width: 0;
}
.bce-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bce-dark);
    margin: 0 0 7px;
}
.bce-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--bce-border);
    border-radius: var(--bce-radius-sm);
    font-size: 15px;
    color: #1a1a2e;
    background: #fff;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bce-input:focus {
    border-color: var(--bce-mid);
    box-shadow: 0 0 0 3px rgba(65, 105, 168, 0.18);
}


/* ── Energy pill toggle ─────────────────────────────────── */
.bce-gender-row {
    margin-bottom: 1.5rem;
}
.bce-gender-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.bce-gender-btn {
    background: transparent;
    border: 1.5px solid var(--bce-border);
    color: var(--bce-dark);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.bce-gender-btn:hover {
    border-color: var(--bce-mid);
}
.bce-gender-btn--active {
    background: var(--bce-mid);
    color: #ffffff;
    border-color: var(--bce-mid);
}


/* ── Submit ─────────────────────────────────────────────── */
.bce-submit {
    height: 44px;
    padding: 0 28px;
    background: var(--bce-dark);
    color: #ffffff;
    border: 0;
    border-radius: var(--bce-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.01em;
    transition: background-color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bce-submit:hover    { background: var(--bce-mid); }
.bce-submit:active   { background: #163060; }
.bce-submit:disabled { background: #b0bdd4; cursor: not-allowed; }


/* ── Error message ──────────────────────────────────────── */
.bce-error {
    margin: 1rem 0 0;
    padding: 12px 14px;
    background: #fdf2f2;
    border: 1px solid #f0c4c4;
    border-left: 4px solid #c0392b;
    border-radius: 0 var(--bce-radius-sm) var(--bce-radius-sm) 0;
    font-size: 13.5px;
    color: #8b1a1a;
    line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════
   Results
   ══════════════════════════════════════════════════════════════ */
.bce-results-wrap {
    /* container exists so the smooth-scroll has a target */
}
.bce-results {
    animation: bce-fade-in 0.4s ease;
}
@keyframes bce-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Archetype card ─────────────────────────────────────── */
.bce-archetype {
    background: var(--bce-light);
    border-radius: var(--bce-radius);
    padding: 1.5rem 2rem;
    text-align: center;
    margin: 0 0 1.5rem;
}
.bce-archetype__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--bce-primary);
    font-weight: 500;
    margin: 0 0 8px;
}
.bce-archetype__title {
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: 26px;
    font-weight: 500;
    color: var(--bce-dark);
    margin: 0 0 8px;
    line-height: 1.2;
}
.bce-archetype__msg {
    font-size: 13.5px;
    color: var(--bce-text);
    line-height: 1.65;
    max-width: 480px;
    margin: 0 auto;
}


/* ── Spectrum bar ───────────────────────────────────────── */
.bce-spectrum {
    display: flex;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    margin: 0 0 1.5rem;
}
.bce-spectrum__band {
    flex: 1;
}


/* ── Section heading ────────────────────────────────────── */
.bce-section-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--bce-dark);
    margin: 0 0 1rem;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bce-border);
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.bce-section-title em {
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-weight: 500;
    color: var(--bce-primary);
}


/* ══════════════════════════════════════════════════════════════
   Day rows
   ══════════════════════════════════════════════════════════════ */
.bce-day {
    position: relative;
    background: #fff;
    border: 1px solid var(--bce-border);
    border-left: 4px solid var(--bce-border); /* JS sets the colour */
    border-radius: 0 var(--bce-radius-sm) var(--bce-radius-sm) 0;
    padding: 14px 16px;
    margin: 0 0 10px;
    display: grid;
    grid-template-columns: 1fr 60px;
    gap: 14px;
    align-items: center;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.bce-day--hidden {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
}
.bce-day--today {
    border-width: 1.5px;
    border-color: #BA7517;
    border-left: 4px solid var(--bce-border); /* preserved by JS via inline */
    background: #fffbf5;
    box-shadow: 0 2px 16px rgba(186, 117, 23, 0.10);
}

.bce-day__today {
    position: absolute;
    top: 10px;
    right: 12px;
    background: #FAEEDA;
    color: #854F0B;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
}

.bce-day__info {
    min-width: 0;
}
.bce-day__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    flex-wrap: wrap;
}
.bce-day__name {
    font-weight: 500;
    font-size: 14px;
    color: var(--bce-dark);
}
.bce-day__pill {
    /* JS sets background + colour from RAMP_TINTS */
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.4;
}
.bce-day__chakra {
    font-size: 11px;
    color: var(--bce-faint);
}
.bce-day__energy {
    font-style: italic;
    font-size: 13px;
    color: var(--bce-text);
    margin: 0 0 4px;
    font-family: var(--font-serif, Georgia, serif);
}
.bce-day__desc {
    font-size: 12.5px;
    color: var(--bce-text);
    line-height: 1.55;
    margin: 0;
}

/* Right-side chakra glyph tile (fallback when no image is set) */
.bce-day__tile {
    width: 60px;
    height: 60px;
    border-radius: var(--bce-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* JS sets background to the day's hex */
}

/* Garment image — same slot as the swatch tile */
.bce-day__img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: var(--bce-radius-sm);
    flex-shrink: 0;
    display: block;
}


/* ══════════════════════════════════════════════════════════════
   Closing quote
   ══════════════════════════════════════════════════════════════ */
.branwell-colourenergy .bce-quote {
    background: var(--bce-light) !important;
    border-radius: var(--bce-radius);
    padding: 1.5rem 2rem;
    text-align: center !important;
    margin: 1.25rem 0 0;
}
.branwell-colourenergy .bce-quote__text,
.branwell-colourenergy .bce-quote p.bce-quote__text {
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: 15px;
    color: var(--bce-dark);
    line-height: 1.65;
    max-width: 480px;
    margin: 0 auto 12px !important;
    text-align: center !important;
    display: block;
}
.branwell-colourenergy .bce-quote__sig,
.branwell-colourenergy .bce-quote p.bce-quote__sig {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--bce-text);
    font-weight: 500;
    margin: 0 auto !important;
    text-align: center !important;
    display: block;
}


/* ══════════════════════════════════════════════════════════════
   Final CTA (branwell-cta pattern)
   ══════════════════════════════════════════════════════════════ */
.branwell-colourenergy .bce-final-cta {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 2.5rem 0 1.5rem !important;
    padding-top: 2rem;
    border-top: 1px solid var(--bce-border);
}
.branwell-colourenergy .bce-final-cta__text {
    flex: 1 1 auto;
    min-width: 0;
}
.branwell-colourenergy .bce-final-cta__title {
    font-size: 22px;
    font-weight: 500;
    color: var(--bce-dark);
    margin: 0 0 6px !important;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-align: left !important;
}
.branwell-colourenergy .bce-final-cta__title em {
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-weight: 500;
    color: var(--bce-primary);
}
.branwell-colourenergy .bce-final-cta__sub,
.branwell-colourenergy .bce-final-cta p.bce-final-cta__sub {
    font-size: 14px;
    color: var(--bce-text);
    margin: 0 !important;
    line-height: 1.55;
    text-align: left !important;
}
.bce-final-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: transparent;
    color: var(--bce-dark) !important;
    border: 1.5px solid var(--bce-dark);
    border-radius: var(--bce-radius-sm);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s;
}
.bce-final-cta__btn,
.bce-final-cta__btn:hover,
.bce-final-cta__btn:focus,
.bce-final-cta__btn:active,
.bce-final-cta__btn:visited,
.bce-final-cta__btn *,
.bce-final-cta__btn *:hover,
.bce-final-cta__btn *:focus {
    text-decoration: none !important;
}
.bce-final-cta__btn:hover,
.bce-final-cta__btn:hover * {
    background: var(--bce-dark) !important;
    color: #fff !important;
}
.bce-final-cta__btn:hover .bce-final-cta__arrow {
    transform: translateX(3px);
}
.bce-final-cta__arrow {
    transition: transform 0.15s;
    line-height: 1;
}


/* ══════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .bce-calc           { padding: 22px 18px 24px; }
    .bce-form__row      { grid-template-columns: 1fr; }
    .bce-section-title  { font-size: 20px; }

    .bce-day            { grid-template-columns: 1fr 50px; padding: 14px; }
    .bce-day__tile,
    .bce-day__img       { width: 50px; height: 50px; }

    .bce-final-cta      { flex-direction: column; align-items: flex-start; }
    .bce-final-cta__btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .bce-day            { grid-template-columns: 1fr; }
    .bce-day__tile,
    .bce-day__img       { width: 44px; height: 44px; margin-top: 8px; }
    .bce-day__today     { top: 8px; right: 8px; }
}

@media print {
    .bce-calc,
    .bce-final-cta,
    .bce-submit,
    .bce-error { display: none; }
}