/**
 * CJ's Brew & BBQ — Curing Salt Calculator (tool-specific)
 *
 * Shared primitives live in calculator-shared.css. This file carries the
 * cure-specific components plus the Sausage Scaler visual signatures that
 * calculator-shared.css doesn't cover (numbered orange headings, orange-ruled
 * block titles).
 *
 * Layout intent: the ANSWER is the loudest thing on the page. v1 buried "2.5 g"
 * in one cell of a four-cell diagnostic bar; the weigh-out tiles here are the
 * largest type in the tool, and the regulatory numbers sit behind a disclosure.
 */

/* === Numbered section heading (matches .cj-section-header) ================ */

.cjbb-cure .cjbb-card__heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    line-height: 1.2;
}

.cjbb-cure .cjbb-card__heading--step2 {
    margin-top: var(--space-6);
}

/* Numerals in a filled chip, so "1" and "2" read as steps rather than
   punctuation the way the old "1)" did. */
.cjbb-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background: var(--brand-primary);
    color: #fff !important;
    border-radius: 50%;
    font-family: var(--font-button);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* === Mode tabs =========================================================== */

.cjbb-cure__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 var(--space-5);
    border-bottom: 1px solid var(--border-default);
}

.cjbb-cure__tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-button);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    cursor: pointer;
    min-height: 44px;
    transition: color 150ms, border-color 150ms;
}

/* Every state needs the background declared, not just the base. Kadence's
   global.min.css styles `button:hover` and `button:focus` with a background at
   the same specificity as a single-class hover rule — a rule that only sets
   `color` leaves that background showing, which turned the selected tab into a
   filled orange block on click while the other stayed outlined. */
.cjbb-cure__tab,
.cjbb-cure__tab:hover,
.cjbb-cure__tab:focus,
.cjbb-cure__tab:active {
    background: transparent !important;
    box-shadow: none !important;
}

.cjbb-cure__tab:hover {
    color: var(--text-primary);
}

.cjbb-cure__tab--active,
.cjbb-cure__tab--active:hover,
.cjbb-cure__tab--active:focus {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.cjbb-cure__tab:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

/* === Step 1: product choice cards ======================================== */

.cjbb-choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.cjbb-choice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-primary);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: 44px;
    transition: border-color 150ms, background-color 150ms;
}

html.theme-dark .cjbb-choice {
    background: var(--dark-bg-tertiary);
}

.cjbb-choice:hover {
    border-color: var(--brand-primary);
}

/* The radio itself is redundant once the whole card indicates state, but it
   stays in the DOM for keyboard and screen-reader users. */
.cjbb-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cjbb-choice:focus-within {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.cjbb-choice--active {
    border-color: var(--brand-primary);
    background: rgba(255, 88, 16, 0.08);
}

html.theme-dark .cjbb-choice--active {
    background: rgba(255, 88, 16, 0.12);
}

.cjbb-choice__icon {
    flex: 0 0 auto;
    font-size: 1.5rem;
    line-height: 1;
}

.cjbb-choice__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.cjbb-choice__label {
    font-family: var(--font-button);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.cjbb-choice__examples {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.35;
}

.cjbb-choice__tag {
    flex: 0 0 auto;
    align-self: center;
    padding: 3px 9px;
    border: 1px solid var(--border-default);
    border-radius: 9999px;
    font-family: var(--font-button);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cjbb-choice--active .cjbb-choice__tag {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* === Step 2: the weight input gets deliberate prominence ================= */

.cjbb-input--big {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 14px 16px;
    min-height: 56px;
}

.cjbb-cure .cjbb-input-row .cjbb-input--unit {
    flex: 0 0 100px;
    font-size: 1rem;
    min-height: 56px;
}

/* === The answer ========================================================== */

.cjbb-answer__lead {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: var(--leading-normal, 1.55);
    margin: 0 0 var(--space-4);
}

/* Weigh-out tiles — the loudest thing in the tool, by design. */
.cjbb-weigh {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}

.cjbb-weigh__item {
    padding: var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    text-align: left;
}

html.theme-dark .cjbb-weigh__item {
    background: var(--dark-bg-tertiary);
}

/* The cure itself — the number that matters most. */
.cjbb-weigh__item--primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.cjbb-weigh__name {
    font-family: var(--font-button);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.cjbb-weigh__item--primary .cjbb-weigh__name {
    color: rgba(255, 255, 255, 0.9);
}

.cjbb-weigh__value {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.cjbb-weigh__item--primary .cjbb-weigh__value {
    color: #fff;
}

.cjbb-weigh__meta {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

.cjbb-weigh__item--primary .cjbb-weigh__meta {
    color: rgba(255, 255, 255, 0.85);
}

/* === Plain-language safety note (replaces the v1 verdict panel here) ===== */

.cjbb-answer__note {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal, 1.55);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

html.theme-dark .cjbb-answer__note {
    background: var(--dark-bg-tertiary);
}

.cjbb-answer__note--good {
    border-left-color: var(--success);
}

.cjbb-answer__note--info {
    border-left-color: #22D3EE;
}

/* === Guidance blocks (orange rule, matching the Sausage Scaler) ========== */

.cjbb-block {
    margin: 0 0 var(--space-4);
}

.cjbb-block__title {
    font-family: var(--font-button);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    padding-left: var(--space-3);
    border-left: 3px solid #FF5810 !important;
    line-height: 1.2;
}

.cjbb-block__text {
    margin: 0;
    padding-left: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal, 1.6);
}

/* === Footer guidance — one panel, three facts ============================ */

.cjbb-cure__footer {
    margin: var(--space-8) 0 var(--space-6);
    padding: var(--space-6);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.cjbb-cure__footer-heading {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    margin: 0 0 var(--space-5);
}

.cjbb-cure__footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
}

.cjbb-fact__title {
    font-family: var(--font-button);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--brand-primary);
    margin-bottom: var(--space-2);
    line-height: 1.25;
}

.cjbb-fact p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal, 1.6);
}

.cjbb-cure__footer-fine {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* === Card polish ========================================================= */

/* Spec calls for !important — Kadence overrides the plain card border on
   shortcode-rendered pages. */
.cjbb-cure .cjbb-card {
    border: 1px solid var(--border-subtle) !important;
}

/* Kadence's content.min.css styles `.single-content h2` and `p` at specificity
   (0,1,1), which outranks a bare single-class selector. Scope through the tool
   root or these margins get silently discarded. */
.cjbb-cure .cjbb-answer__lead,
.cjbb-cure .cjbb-block__text,
.cjbb-cure .cjbb-fact p,
.cjbb-cure .cjbb-cure__footer-fine {
    margin-top: 0;
}

@media (min-width: 980px) {
    .cjbb-cure__answer {
        align-self: start;
        position: sticky;
        top: var(--space-4);
    }
}

/* === Mobile ============================================================== */

@media (max-width: 768px) {
    .cjbb-cure .cjbb-card__heading {
        font-size: 1.35rem;
    }

    .cjbb-weigh {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .cjbb-weigh__value {
        font-size: 2rem;
    }

    .cjbb-tune__row {
        grid-template-columns: 1fr;
    }

    /* Sticky results would eat the whole viewport on a phone. */
    .cjbb-cure__answer {
        position: static;
    }

    /* Equal halves so neither label wraps into a second line. */
    .cjbb-cure__tab {
        flex: 1 1 50%;
        padding: var(--space-3) var(--space-2);
        font-size: 0.78rem;
        text-align: center;
    }
}

/* === Print =============================================================== */

@media print {
    .cjbb-cure__tabs,
    .cjbb-tune,
    .cjbb-cure__controls .cjbb-actions,
    .cjbb-actions {
        display: none !important;
    }

    .cjbb-weigh__item,
    .cjbb-verdict,
    .cjbb-answer__note {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #999 !important;
        page-break-inside: avoid;
    }

    .cjbb-weigh__item--primary .cjbb-weigh__name,
    .cjbb-weigh__item--primary .cjbb-weigh__value,
    .cjbb-weigh__item--primary .cjbb-weigh__meta {
        color: #000 !important;
    }

    /* Disclosures print open — a printed sheet can't be expanded. */
    .cjbb-details__body {
        display: block !important;
    }
}

/* The answer card is output, not a step the visitor carries out, so it takes no
   step numeral — only the two things they actually decide are numbered. */
.cjbb-cure .cjbb-card__heading--answer {
    gap: 0;
}