/**
 * CJ's Brew & BBQ — Shared Calculator Primitives
 * Loaded on every calculator page (brine, ABV, rub, carbonation).
 * Tool-specific styles live in their own .css and load AFTER this file.
 *
 * All values come from canonical design-system tokens in brand-colors.css.
 * Dark mode is automatic via theme-aware tokens (--bg-*, --text-*, --border-*).
 */

/* === Page Hero (matches .directory-hero on the Recipes page) ============== */

.cjbb-tool-hero {
    background: #0F0F0F;
    border-bottom: 1px solid var(--dark-border-warm, #3D2E29);
    padding: 80px 24px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    box-sizing: border-box;
    margin-bottom: var(--space-8, 2rem);
}

html.theme-light .cjbb-tool-hero {
    background: #fff;
    border-bottom-color: #e5e5e5;
}

.cjbb-tool-hero__inner {
    display: contents; /* children participate directly in the hero flex layout */
}

.cjbb-tool-hero__overline {
    font-family: 'Work Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #FF5810 !important;
    margin: 0 0 12px !important;
}

.cjbb-tool-hero__heading {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.9;
    color: #F5F5F5 !important;
    margin: 0 0 18px !important;
}

html.theme-light .cjbb-tool-hero__heading {
    color: #111 !important;
}

.cjbb-tool-hero__accent {
    color: #FF5810;
}

.cjbb-tool-hero__sub {
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #929190 !important;
    max-width: 560px;
    margin: 0;
}

html.theme-light .cjbb-tool-hero__sub {
    color: #555 !important;
}

@media (max-width: 768px) {
    .cjbb-tool-hero {
        padding: 48px 16px 40px;
    }
}

/* === Layout =============================================================== */

.cjbb-tool {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    box-sizing: border-box;
    width: 100%;
}

.cjbb-tool__head {
    text-align: center;
    margin: 0 0 var(--space-6);
    padding: 0 var(--space-4);
}

.cjbb-tool__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.6rem);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--text-heading, var(--text-primary));
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cjbb-tool__sub {
    color: var(--text-secondary);
    margin: 0;
    font-size: var(--text-lg);
}

.cjbb-tool__grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}

@media (min-width: 980px) {
    .cjbb-tool__grid {
        grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    }
}

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

.cjbb-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.cjbb-card__heading {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 0 var(--space-5);
    color: var(--text-heading, var(--text-primary));
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* === Fields =============================================================== */

.cjbb-field {
    margin: 0 0 var(--space-5);
    border: 0;
    padding: 0;
}

.cjbb-field__label {
    display: block;
    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-2);
}

.cjbb-field__help {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.cjbb-field__hint {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.cjbb-help {
    margin: var(--space-2) 0 var(--space-3);
    padding-left: var(--space-3);
    border-left: 3px solid var(--border-default);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.cjbb-input {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 2px solid var(--border-default);
    border-radius: 6px;
    transition: border-color 150ms, box-shadow 150ms;
    box-sizing: border-box;
    min-height: 44px;
}

.cjbb-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 88, 16, 0.15);
}

/* background-COLOR, not the `background` shorthand: the shorthand resets
   background-position/repeat/size to their initial values, and because this
   rule outranks `select.cjbb-input` on specificity it was wiping the chevron
   longhands set there. Result before this fix: dark-mode selects on every
   calculator page had no dropdown arrow at all (appearance is none, so there
   is no native arrow to fall back on) or tiled it across the control. */
html.theme-dark .cjbb-input {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Re-assert every background longhand, not just the image — Kadence also
   styles selects with a shorthand on production and would reset them again. */
html.theme-dark select.cjbb-input {
    background-color: var(--bg-tertiary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-3) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

select.cjbb-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-3) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: var(--space-10);
    cursor: pointer;
}

.cjbb-input--unit {
    flex: 0 0 110px;
}

.cjbb-input-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.cjbb-input-row .cjbb-input {
    flex: 1;
}

/* === Radios & toggles ===================================================== */

.cjbb-radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    padding: var(--space-2) 0;
    min-height: 44px;
    color: var(--text-primary);
    font-weight: 500;
}

.cjbb-radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.cjbb-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.cjbb-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
    cursor: pointer;
    flex: 0 0 auto;
}

/* === Presets ============================================================== */

.cjbb-presets,
.cjbb-presets--multi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: var(--space-2) 0 var(--space-1);
}

.cjbb-preset {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    border-radius: 9999px;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-button);
    font-weight: 700;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-align: center;
    line-height: 1;
    transition: background-color 150ms, color 150ms, border-color 150ms;
    min-height: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.cjbb-preset--compact {
    padding: var(--space-2) var(--space-3);
    min-height: 34px;
    font-size: var(--text-sm);
}

.cjbb-preset:hover {
    background: var(--brand-primary);
    color: var(--neutral-000);
}

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

.cjbb-preset--active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--neutral-000);
}

.cjbb-preset__name {
    display: block;
    font-size: var(--text-base);
}

.cjbb-preset__meta {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    opacity: 0.85;
}

/* === Buttons ============================================================== */

.cjbb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.cjbb-actions--inline {
    margin-top: var(--space-2);
}

.cjbb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 15px 25px;
    font-family: var(--font-button);
    font-size: var(--text-base);
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: -0.5px;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 150ms, color 150ms, border-color 150ms;
    line-height: 1.2;
}

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

.cjbb-btn--primary {
    background: var(--brand-primary);
    color: var(--neutral-000);
    border-color: var(--brand-primary);
}

.cjbb-btn--primary:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}

.cjbb-btn--secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.cjbb-btn--secondary:hover {
    background: var(--bg-tertiary);
}

.cjbb-btn--outline {
    background: transparent;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.cjbb-btn--outline:hover {
    background: var(--brand-primary);
    color: var(--neutral-000);
}

.cjbb-btn--sm {
    padding: 10px 16px;
    font-size: var(--text-sm);
    min-height: 40px;
}

.cjbb-btn--copied {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--neutral-000) !important;
}

/* === Alerts =============================================================== */

.cjbb-alert {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 500;
    border: 1px solid transparent;
}

.cjbb-alert--error {
    background: var(--error-bg-color);
    color: var(--error-color);
    border-color: var(--error);
}

.cjbb-alert--warn {
    background: rgba(245, 158, 11, 0.1);
    color: var(--text-primary);
    border-color: #F59E0B;
}

html.theme-dark .cjbb-alert--warn {
    background: rgba(245, 158, 11, 0.12);
}

/* === Summary row (used by brine, rub, etc.) =============================== */

.cjbb-summary {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
}

.cjbb-summary__cell {
    text-align: left;
}

.cjbb-summary__label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.cjbb-summary__value {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--leading-tight);
}

.cjbb-summary__value--accent {
    color: var(--brand-primary);
}

/* === Result tiles (used by ABV, carbonation; cream-on-peach decorative) === */

.cjbb-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}

.cjbb-result-tile {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
    border: 2px solid var(--brand-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    color: var(--neutral-900); /* gradient is always warm cream-on-peach */
}

html.theme-dark .cjbb-result-tile {
    background: linear-gradient(135deg, #2B1608 0%, #3A1E0F 100%);
    color: var(--dark-text-primary);
}

.cjbb-result-tile__label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-primary-dark);
    margin-bottom: var(--space-1);
}

html.theme-dark .cjbb-result-tile__label {
    color: var(--dark-warning);
}

.cjbb-result-tile__value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: inherit;
    line-height: var(--leading-tight);
    margin-bottom: var(--space-1);
}

.cjbb-result-tile__unit {
    font-size: var(--text-sm);
    color: inherit;
    opacity: 0.8;
}

/* === Info / tip panels ==================================================== */

.cjbb-info {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.cjbb-info strong {
    color: var(--text-primary);
}


/* =========================================================================
   PROMOTED SHARED COMPONENTS
   Disclosure (Fine tune / details), key-value rows and the verdict panel.
   These began life in cure-calculator.css and are now used by the admin
   recipe editor too, which does not load that file. Anything used by more
   than one tool belongs here.
   ========================================================================= */

/* === Fine tune disclosure ================================================ */

.cjbb-tune {
    margin-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-4);
}

.cjbb-tune__summary,
.cjbb-details__summary {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    min-height: 44px;
    list-style: none;
    color: var(--brand-primary);
    font-family: var(--font-button);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cjbb-tune__summary::-webkit-details-marker,
.cjbb-details__summary::-webkit-details-marker {
    display: none;
}

.cjbb-tune__summary::before,
.cjbb-details__summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1;
    align-self: center;
}

.cjbb-tune[open] > .cjbb-tune__summary::before,
.cjbb-details[open] > .cjbb-details__summary::before {
    content: '−';
}

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

.cjbb-tune__hint {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
}

.cjbb-tune__body {
    padding-top: var(--space-3);
}

.cjbb-tune__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.cjbb-tune__row .cjbb-field {
    margin-bottom: var(--space-2);
}

/* === Key/value rows in the disclosures =================================== */

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

.cjbb-details__body {
    padding-top: var(--space-2);
}

.cjbb-kv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
}

.cjbb-kv:last-child {
    border-bottom: none;
}

.cjbb-kv__key {
    color: var(--text-secondary);
}

.cjbb-kv__val {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

/* === Verdict panel (mode B only — where the visitor supplied the number) == */

.cjbb-verdict {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    margin-bottom: var(--space-4);
}

.cjbb-verdict__dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 5px;
    background: var(--text-tertiary, #808080);
}

.cjbb-verdict__body {
    min-width: 0;
}

.cjbb-verdict__title {
    font-family: var(--font-button);
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: var(--space-1);
}

.cjbb-verdict__detail {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal, 1.55);
}

.cjbb-verdict--good   { border-color: var(--success); background: var(--success-bg-color); }
.cjbb-verdict--good   .cjbb-verdict__dot { background: var(--success); }
.cjbb-verdict--warn   { border-color: var(--warning); background: var(--warning-bg-color); }
.cjbb-verdict--warn   .cjbb-verdict__dot { background: var(--warning); }
.cjbb-verdict--danger { border-color: var(--error); background: var(--error-bg-color); }
.cjbb-verdict--danger .cjbb-verdict__dot { background: var(--error); }

/* The tinted light-mode fills are too pale to carry dark-mode text, so dark
   mode keeps the card surface and leans on the coloured left rule. */
html.theme-dark .cjbb-verdict--good,
html.theme-dark .cjbb-verdict--warn,
html.theme-dark .cjbb-verdict--danger {
    background: var(--dark-bg-tertiary);
}

html.theme-dark .cjbb-verdict__detail {
    color: var(--dark-text-secondary);
}

.cjbb-verdict--danger .cjbb-verdict__title {
    color: var(--error-dark);
}

html.theme-dark .cjbb-verdict--danger .cjbb-verdict__title {
    color: var(--dark-error, #F87171);
}

/* === Utilities ============================================================ */

.cjbb-hide {
    display: none !important;
}

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

@media print {
    /* Hide page chrome */
    header,
    footer,
    #site-header,
    #site-footer,
    .site-header,
    .site-footer,
    .kadence-sticky-header,
    nav,
    .wp-block-template-part,
    .cjbb-tool-hero,
    .cjbb-actions,
    .cjbb-btn,
    .cjbb-presets,
    .cjbb-presets--multi {
        display: none !important;
    }

    /* Clean print background */
    body,
    .cjbb-card,
    .cjbb-result-tile,
    .cjbb-summary {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    .cjbb-card {
        border-color: #ccc !important;
        page-break-inside: avoid;
    }

    /* Ensure results are visible */
    .cjbb-hide {
        display: none !important;
    }

    .cjbb-result-tile {
        border: 1px solid #999 !important;
    }

    .cjbb-tool {
        max-width: 100%;
        padding: 0;
    }
}