/*
 * SPG Risk Calculators — Stylesheet
 *
 * Uses CSS custom properties at the top so colours can be overridden
 * in the SaskPulse theme to match exactly. The defaults are a neutral
 * green palette typical of ag websites.
 *
 * Override in your theme's CSS with:
 *   #some-page .spg-calculator { --spg-primary: #yourgreen; }
 */

.spg-calculator {
    --spg-primary:        #009d5b;
    --spg-primary-light:  #e8f4e8;
    --spg-primary-mid:    #4a8f4a;
    --spg-border:         #d0d8d0;
    --spg-bg:             #ffffff;
    --spg-bg-section:     #f7faf7;
    --spg-text:           #1a1a1a;
    --spg-text-muted:     #555555;
    --spg-radius:         6px;
    --spg-font: 'Roboto', sans-serif;
    --spg-font-heading: 'Myriad Pro', 'Myriad', sans-serif;

    font-family:   var(--spg-font);
    color:         var(--spg-text);
    max-width:     760px;
    margin:        0 auto;
    padding:       1rem 1rem;
}

/* ── Intro ───────────────────────────────────────────────────────────────── */

.spg-calc-intro {
    background:    var(--spg-primary-light);
    border-left:   4px solid var(--spg-primary);
    border-radius: var(--spg-radius);
    padding:       16px 20px;
    margin-block: 24px;
    font-size:     0.95em;
    color:         var(--spg-text);
}

.spg-calc-intro p:last-child { margin-bottom: 0; }

.spg-calc-intro p:first-child {
    margin-top: 0;
}


/* ── Additive: Sections ──────────────────────────────────────────────────── */

.spg-calc-section {
    border:        1px solid var(--spg-border);
    border-radius: var(--spg-radius);
    background:    var(--spg-bg-section);
    padding:       0;
    margin:        0 0 16px 0;
    min-width:     0;
}

.spg-calc-section__title {
    display:       block;
    background:    var(--spg-primary);
    color:         #ffffff;
    font-family: var(--spg-font-heading);
    font-size:     0.95em;
    font-weight:   600;
    padding:       10px 16px;
    border-radius: var(--spg-radius) var(--spg-radius) 0 0;
    margin:        0;
    line-height:   1.3;
}

.spg-calc-section__prefix {
    opacity: 0.85;
    margin-right: 6px;
}

.spg-calc-section__options {
    padding: 8px 0;
}

/* Option rows */
.spg-calc-option {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 16px;
    cursor:        pointer;
    border-bottom: 1px solid var(--spg-border);
    transition:    background 0.15s;
    line-height:   1.4;
}

.spg-calc-option:last-child { border-bottom: none; }

.spg-calc-option:hover {
    background: #f0f7f0;
}

.spg-calc-option--selected {
    background: var(--spg-primary-light) !important;
}

.spg-calc-option__radio {
    flex-shrink: 0;
    width:  18px;
    height: 18px;
    accent-color: var(--spg-primary);
    cursor: pointer;
}

.spg-calc-option__label {
    flex: 1;
    font-size: 0.92em;
}

.spg-calc-option__points {
    flex-shrink:   0;
    font-size:     0.82em;
    font-weight:   600;
    color:         var(--spg-primary-mid);
    background:    var(--spg-primary-light);
    border:        1px solid var(--spg-primary-mid);
    border-radius: 3px;
    padding:       2px 7px;
    white-space:   nowrap;
}

/* ── Score display ───────────────────────────────────────────────────────── */

.spg-calc-score {
    display:       flex;
    align-items:   baseline;
    gap:           5px;
    font-family: var(--spg-font-heading);
    font-weight:   600;
    font-size:     2.2em;
    color:         var(--spg-primary);
    margin:        10px 0 12px;
    /* padding: 15px 20px;
    border: 1px solid var(--spg-text-muted);
    border-radius: var(--spg-radius); */
    padding-bottom: 5px;
    border-bottom: 1px solid var(--spg-text-muted);
}

.spg-calc-score__label {
    color: var(--spg-text);
}

.spg-calc-score__value {
    font-family: var(--spg-font-heading);
    font-size:  1em;
    line-height: 1;
    margin-left: 10px;
}

.spg-calc-score__max {
    font-size:   0.8em;
    color:       var(--spg-text-muted);
    font-weight: 400;
}

.spg-calc-prompt {
    font-size:  1.5em;
    color:      var(--spg-text);
    /* font-style: italic; */
    margin:     8px 0 0;
    padding: 15px 20px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: var(--spg-radius);
    background-color: rgba(255, 207, 153, 0.2);
}

/* ── Result box (shared by both calculators) ─────────────────────────────── */

.spg-calc-result,
.spg-rr-step-result {
    border-radius: var(--spg-radius);
    border-left:   5px solid var(--spg-border);
    background:    #f8f8f8;
    padding:       10px 20px;
    margin-top:    16px;
    transition:    opacity 0.2s;
}

.spg-calc-result--hidden {
    display: none;
}

.spg-calc-result__title {
    margin:      0;
    /* margin:      0 0 8px; */
    font-family: var(--spg-font-heading);
    font-size:   1.5em;
    font-weight: 700;
    line-height: 1.3;
}

.spg-calc-result__desc {
    font-size:   1em;
    line-height: 1.6;
    color:       var(--spg-text);
    margin-top: 8px;
}

.spg-calc-result__desc p:last-child,
.spg-calc-result__desc ul:last-child {
    margin-bottom: 0;
}

.spg-calc-result__desc ul {
    padding-left: 20px;
}

.spg-calc-result__desc li {
    margin-bottom: 4px;
}

.spg-calc-result__inner {
    margin-bottom: 10px;
}


/* ── Root Rot: Steps ─────────────────────────────────────────────────────── */

.spg-rr-step {
    border:        1px solid var(--spg-border);
    border-radius: var(--spg-radius);
    margin-bottom: 24px;
    overflow:      hidden;
}

.spg-rr-step__title {
    background:  var(--spg-primary);
    color:       #ffffff;
    margin:      0;
    font-family: var(--spg-font-heading);
    padding:     12px 20px;
    font-size:   1em;
    font-weight: 700;
}

.spg-rr-step__description {
    background:  var(--spg-primary-light);
    color:       var(--spg-text);
    padding:     10px 20px;
    margin:      0;
    font-size:   0.9em;
    border-bottom: 1px solid var(--spg-border);
}

.spg-rr-factors {
    padding: 0;
}

.spg-rr-step-result .spg-calc-result__inner {
    margin-top: 10px;
}

/* Individual factor */
.spg-rr-factor {
    border:        none;
    border-bottom: 1px solid var(--spg-border);
    padding:       14px 20px;
    margin:        0;
}

.spg-rr-factor:last-child {
    border-bottom: none;
}

.spg-rr-factor__label {
    display:     block;
    font-weight: 600;
    font-family: var(--spg-font-heading);
    font-size:   0.93em;
    margin-bottom: 10px;
    padding-top: 14px;
    color:       var(--spg-text);
}

.spg-rr-factor__options {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
}

/* Higher / lower option pills */
.spg-rr-option {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    flex:          1 1 280px;
    border:        2px solid var(--spg-border);
    border-radius: var(--spg-radius);
    padding:       10px 14px;
    cursor:        pointer;
    background:    var(--spg-bg);
    transition:    border-color 0.15s, background 0.15s;
    line-height:   1.6;
}

.spg-rr-option:hover {
    border-color: var(--spg-primary-mid);
    background:   #f7faf7;
}

.spg-rr-option--selected.spg-rr-option--higher {
    border-color: var(--spg-high-border);
    background:   var(--spg-high-bg);
}

.spg-rr-option--selected.spg-rr-option--lower {
    border-color: var(--spg-low-border);
    background:   var(--spg-low-bg);
}

.spg-rr-option__radio {
    flex-shrink:  0;
    margin-top:   2px;
    width:   18px;
    height:  18px;
    accent-color: var(--spg-primary);
    cursor:  pointer;
}

.spg-rr-option__badge {
    flex-shrink:   0;
    font-family: var(--spg-font-heading);
    font-size:     0.75em;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    padding:       2px 8px;
    white-space:   nowrap;
    line-height:   1.6;
}

.spg-rr-option__badge--higher {
    background: var(--spg-high-bg);
    color:      var(--spg-high-title);
    border:     1px solid var(--spg-high-border);
}

.spg-rr-option__badge--lower {
    background: var(--spg-low-bg);
    color:      var(--spg-low-title);
    border:     1px solid var(--spg-low-border);
}

.spg-rr-option__text {
    font-family: var(--spg-font);
    font-size: 0.88em;
    color:     var(--spg-text);
    flex: 1;
}

/* Step result (sits at bottom of each step card) */
.spg-rr-step-result {
    margin: 0;
    border-radius: 0;
    border-left:   none;
    border-top:    4px solid var(--spg-border);
}

.spg-rr-step-result.spg-calc-result--low    { border-color: var(--spg-low-border); }
.spg-rr-step-result.spg-calc-result--moderate { border-color: var(--spg-moderate-border); }
.spg-rr-step-result.spg-calc-result--high   { border-color: var(--spg-high-border); }

/* Clear button — shown in Step 1 result when high risk */
.spg-rr-clear-btn {
    display:       inline-block;
    margin-top:    12px;
    padding:       7px 16px;
    background:    transparent;
    border:        2px solid currentColor;
    border-radius: var(--spg-radius);
    color:         inherit;
    font-family: var(--spg-font);
    font-size:     0.88em;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s;
    margin-bottom: 10px;
}

.spg-rr-clear-btn:hover {
    background: rgba(0,0,0,0.08);
}


/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 540px) {
    .spg-calc-option {
        padding: 10px 12px;
    }

    .spg-calc-option__points {
        display: none; /* Points visible on desktop; hide to save space on small screens */
    }

    .spg-rr-factor__options {
        flex-direction: column;
    }

    .spg-rr-option {
        flex: 1 1 100%;
    }

    .spg-rr-step__title {
        font-size: 0.92em;
    }
}

/* ── Print / PDF (DocRaptor / PrinceXML) ─────────────────────────────────── */
/*
 * The theme sets a --scale-factor CSS variable (e.g. 1.6667) that DocRaptor
 * uses to size all text in the PDF via calc(var(--scale-factor) * Xpx).
 * We adopt the same pattern here so calculator text scales consistently with
 * the rest of the document. The fallback of 1 means these are safe in browsers
 * that don't set the variable (they'll just render at the base px value).
 */

@media print {
    .spg-calculator {
        font-size: calc(var(--scale-factor, 1) * 7px);
        max-width: 100%;
    }

    .spg-calc-section__title,
    .spg-rr-step__title {
        font-size: calc(var(--scale-factor, 1) * 8.5px);
        padding: 6px 12px;
    }

    .spg-calc-option {
        padding: 5px 12px;
        font-size: calc(var(--scale-factor, 1) * 6.75px);
        gap: 16px;
    }

    .spg-calc-option__radio {
        flex-shrink: 0;
        margin-right: 4px;
    }

    .spg-calc-option__label,
    .spg-rr-option__text {
        font-size: calc(var(--scale-factor, 1) * 6.75px);
    }

    .spg-calc-option__points,
    .spg-rr-option__badge {
        font-size: calc(var(--scale-factor, 1) * 8px);
    }

    .spg-calc-score {
        font-size: calc(var(--scale-factor, 1) * 9px);
    }

    .spg-calc-score__value {
        font-size: calc(var(--scale-factor, 1) * 12px);
    }

    .spg-calc-result,
    .spg-rr-step-result {
        padding: 10px 14px;
    }

    .spg-calc-result__title {
        font-size: calc(var(--scale-factor, 1) * 7px);
    }

    .spg-calc-result__desc {
        font-size: calc(var(--scale-factor, 1) * 6.75px);
    }

    .spg-rr-factor {
        padding: 8px 14px;
    }

    .spg-rr-factor__label {
        font-size: calc(var(--scale-factor, 1) * 6.75px);
        margin-bottom: 6px;
    }

    .spg-rr-option {
        padding: 6px 10px;
    }

    .spg-calc-intro {
        font-size: calc(var(--scale-factor, 1) * 6.75px);
        padding: 10px 14px;
    }

    .spg-rr-step__description {
        font-size: calc(var(--scale-factor, 1) * 6.75px);
        padding: 6px 14px;
    }
}