/*
 * Plain scoped CSS rather than compiled Tailwind: a plugin that ships a
 * Tailwind build would need a node step on every deploy, and utility
 * classes leaking into a theme is a support problem nobody wants.
 *
 * All spacing uses logical properties (inline-start / inline-end) so the
 * Arabic and English versions share one stylesheet.
 */

.lh-calculator {
    --lh-accent: #1f4b7a;
    --lh-accent-soft: #eaf1f8;
    --lh-border: #d9dee5;
    --lh-text: #1c1f23;
    --lh-muted: #5b6672;
    --lh-good: #2f7a4f;
    --lh-warn: #b8842a;
    --lh-bad: #a63a3a;
    --lh-radius: 10px;

    color: var(--lh-text);
    max-width: 46rem;
    margin-inline: auto;
    line-height: 1.7;
}

.lh-calculator__title {
    margin-block-end: 0.25rem;
}

.lh-calculator__intro {
    color: var(--lh-muted);
}

.lh-calculator__meta {
    color: var(--lh-muted);
    font-size: 0.9rem;
    margin-block-end: 1.5rem;
}

/* Progress */

.lh-progress {
    background: var(--lh-accent-soft);
    border-radius: 999px;
    block-size: 8px;
    overflow: hidden;
    margin-block-end: 0.75rem;
}

.lh-progress__bar {
    background: var(--lh-accent);
    block-size: 100%;
    inline-size: 0;
    transition: inline-size 0.25s ease;
}

.lh-step-label {
    font-weight: 600;
    margin-block: 0 1rem;
}

/* Questions */

.lh-question {
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius);
    padding: 1rem 1.15rem;
    margin-block-end: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.lh-question[data-answered="1"] {
    border-color: var(--lh-accent);
    background: #fbfcfe;
}

.lh-question[data-invalid="1"] {
    border-color: var(--lh-bad);
}

.lh-question__text {
    flex: 1 1 22rem;
    margin: 0;
}

.lh-choices {
    display: flex;
    gap: 0.4rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/*
 * Two answers sit beside the question. Three or more need the full
 * width, or a five level maturity scale wraps into a ragged column
 * against the question text.
 */
.lh-question:has(.lh-choices[data-count="3"]),
.lh-question:has(.lh-choices[data-count="4"]),
.lh-question:has(.lh-choices[data-count="5"]),
.lh-question:has(.lh-choices[data-count="6"]) {
    display: block;
}

.lh-choices:not([data-count="2"]) {
    margin-block-start: 0.6rem;
}

.lh-choice {
    border: 1px solid var(--lh-border);
    background: #fff;
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
    cursor: pointer;
    font: inherit;
    min-inline-size: 4.5rem;
}

.lh-choice[aria-pressed="true"] {
    background: var(--lh-accent);
    border-color: var(--lh-accent);
    color: #fff;
}

.lh-choice:focus-visible {
    outline: 2px solid var(--lh-accent);
    outline-offset: 2px;
}

/* Actions and forms */

.lh-actions {
    display: flex;
    gap: 0.5rem;
    margin-block-start: 1.25rem;
    flex-wrap: wrap;
}

.lh-button {
    background: var(--lh-accent);
    color: #fff;
    border: 1px solid var(--lh-accent);
    border-radius: var(--lh-radius);
    padding: 0.6rem 1.4rem;
    font: inherit;
    cursor: pointer;
}

.lh-button[disabled] {
    opacity: 0.6;
    cursor: default;
}

.lh-button--ghost {
    background: transparent;
    color: var(--lh-accent);
}

.lh-form label {
    display: block;
    margin-block-end: 0.75rem;
}

.lh-form label > span {
    display: block;
    font-size: 0.9rem;
    color: var(--lh-muted);
    margin-block-end: 0.2rem;
}

.lh-form input[type="text"],
.lh-form input[type="email"],
.lh-form input[type="tel"] {
    inline-size: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius);
    font: inherit;
}

.lh-consent {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.92rem;
}

.lh-error {
    color: var(--lh-bad);
    font-size: 0.92rem;
}

.lh-notice,
.lh-disclaimer {
    font-size: 0.85rem;
    color: var(--lh-muted);
    border-inline-start: 3px solid var(--lh-border);
    padding-inline-start: 0.75rem;
    margin-block-start: 1.5rem;
}

/* Result */

.lh-result__score {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lh-accent);
}

.lh-result__band {
    display: inline-block;
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    background: var(--lh-accent-soft);
    color: var(--lh-accent);
    font-weight: 600;
}

.lh-domain {
    margin-block-end: 0.85rem;
}

.lh-domain__head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.92rem;
}

.lh-domain__track {
    background: var(--lh-accent-soft);
    border-radius: 999px;
    block-size: 6px;
    overflow: hidden;
    margin-block-start: 0.25rem;
}

.lh-domain__fill {
    block-size: 100%;
    background: var(--lh-good);
}

.lh-domain[data-level="warn"] .lh-domain__fill { background: var(--lh-warn); }
.lh-domain[data-level="bad"] .lh-domain__fill { background: var(--lh-bad); }

/* Paywall */

.lh-paywall {
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius);
    padding: 1.5rem;
}

.lh-paywall__price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lh-accent);
}

.lh-paywall__price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--lh-muted);
}

/* FAQ */

.lh-faq {
    max-width: 46rem;
    margin-inline: auto;
}

.lh-faq__item {
    border-block-end: 1px solid #d9dee5;
    padding-block: 0.85rem;
}

.lh-faq__question {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.lh-faq__question::-webkit-details-marker {
    display: none;
}

.lh-faq__question::after {
    content: "+";
    float: inline-end;
    color: #5b6672;
}

.lh-faq__item[open] .lh-faq__question::after {
    content: "\2212";
}

.lh-faq__answer {
    color: #3d454e;
}

.lh-stat {
    font-weight: 700;
    font-size: 1.5em;
}

@media print {
    .lh-actions,
    .lh-progress,
    .lh-paywall {
        display: none !important;
    }

    .lh-calculator {
        max-width: none;
    }
}

/*
 * Editor-only explanation of why a priced calculator is still open.
 */
.lh-admin-notice {
    background: #fff8e5;
    border: 1px solid #e6c86e;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
    color: #6b5209;
}

/*
 * Safety net for an accidental Ctrl+P on the calculator page.
 *
 * The proper output is the standalone report, which renders outside the
 * theme. But printing this page should not spit out seven sheets of blank
 * question cards either, so the form is suppressed and only the result is
 * lifted out of the theme chrome.
 */
@media print {
    .lh-calculator [data-lh-questions] .lh-question,
    .lh-calculator .lh-admin-notice,
    .lh-calculator .lh-paywall,
    .lh-calculator .lh-progress,
    .lh-calculator .lh-step-label,
    .lh-calculator .lh-form,
    .lh-calculator .lh-actions {
        display: none !important;
    }

    .lh-calculator:not(:has(.lh-result))::after {
        content: attr(data-print-hint);
        display: block;
        font-size: 0.9rem;
        color: #5b6672;
    }

    /* Isolate the result from the theme header, menu and footer. */
    html:has(.lh-result) body * {
        visibility: hidden;
    }

    html:has(.lh-result) .lh-result,
    html:has(.lh-result) .lh-result * {
        visibility: visible;
    }

    html:has(.lh-result) .lh-result {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 100%;
    }
}