/**
 * Beherzig Tools — UX Polish Layer
 *
 * Additive polish for the 15 tool pages in /tools/.
 * Loaded after each tool's inline \3c style> so all rules override on conflict.
 *
 * Goals:
 *   - Consistent form-field look across all 15 tools
 *   - Premium button styling matching Beherzig brand
 *   - Better focus-states (WCAG 2.2 ≥3:1 contrast)
 *   - Touch-targets ≥44×44 px on mobile
 *   - Subtle result-highlight (when calculation completes)
 *   - Print-friendly defaults
 *
 * Phase 10 of docs/PLAN-Subpage-Foundation-Fix-2026-05-19.md
 */

/* -- Container: consistent max-width + breathing room -- */
.calc-container,
.tool-container,
.quiz-container,
[class*='calc-']:where(div) {
    --bhz-tool-radius: 14px;
    --bhz-tool-shadow: 0 6px 28px rgb(0 0 0 / 6%);
    --bhz-tool-shadow-elevated: 0 12px 40px rgb(0 0 0 / 10%);
    --bhz-tool-accent: var(--accent, var(--beherzig-brown-100, #5c4338));
}

/* -- Header: more elegant, gold accent line -- */
.calc-header,
.tool-header {
    padding: 56px 24px 40px;
    text-align: center;
    border-bottom: 1px solid rgb(0 0 0 / 6%);
    margin-bottom: 40px;
}

.calc-header h1,
.tool-header h1 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--beherzig-graphite, #3d3937);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.calc-header p,
.tool-header p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--beherzig-brown-80, #73574a);
    font-size: 1.06rem;
    line-height: 1.6;
}

/* -- Form-Panels: card-style with subtle elevation -- */
.calc-panel,
.tool-panel,
.quiz-panel {
    background: #fff;
    border-radius: var(--bhz-tool-radius, 14px);
    box-shadow: var(--bhz-tool-shadow, 0 6px 28px rgb(0 0 0 / 6%));
    padding: 32px 28px;
    transition: box-shadow 0.25s ease;
}

.calc-panel:hover,
.tool-panel:hover {
    box-shadow: var(--bhz-tool-shadow-elevated, 0 12px 40px rgb(0 0 0 / 10%));
}

.calc-panel h2,
.tool-panel h2 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--beherzig-graphite, #3d3937);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--beherzig-cream, #f7f5f2);
}

/* -- Fields: consistent spacing + focus-state -- */
.field {
    margin-bottom: 22px;
}

.field label {
    display: block;
    font-weight: 600;
    color: var(--beherzig-graphite, #3d3937);
    font-size: 0.92rem;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid rgb(0 0 0 / 12%);
    border-radius: 8px;
    font: inherit;
    font-size: 1rem;
    background: #fff;
    color: var(--beherzig-graphite, #3d3937);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    min-height: 44px; /* WCAG 2.5.8 touch-target */
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--bhz-tool-accent, #5c4338);
    box-shadow: 0 0 0 3px rgb(92 67 56 / 16%);
}

.field input::placeholder {
    color: rgb(0 0 0 / 36%);
}

.field-hint,
.hint {
    font-size: 0.82rem;
    color: var(--beherzig-brown-80, #73574a);
    margin-top: 6px;
    line-height: 1.4;
}

.field-error,
.error {
    color: #b04830;
    font-size: 0.85rem;
    margin-top: 6px;
}

/* -- Buttons: brand-consistent CTAs -- */
.calc-submit,
.tool-submit,
.btn-calc,
button[type='submit']:not(.beherzig-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    min-height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--bhz-tool-accent, #5c4338);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s,
        transform 0.15s,
        box-shadow 0.2s;
    width: 100%;
    margin-top: 12px;
}

.calc-submit:hover,
.tool-submit:hover,
.btn-calc:hover,
button[type='submit']:not(.beherzig-btn):hover {
    background: var(--beherzig-brown-80, #73574a);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgb(92 67 56 / 25%);
}

.calc-submit:focus-visible,
.tool-submit:focus-visible,
button[type='submit']:not(.beherzig-btn):focus-visible {
    outline: 3px solid var(--accent, #c5a03e);
    outline-offset: 2px;
}

.calc-submit:disabled,
.tool-submit:disabled,
button[type='submit']:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* -- Results-Panel: elevated, gold accent highlight -- */
.calc-result,
.tool-result,
.result-card {
    background: linear-gradient(
        135deg,
        var(--beherzig-cream, #f7f5f2) 0%,
        rgb(247 245 242 / 50%) 100%
    );
    border-radius: var(--bhz-tool-radius, 14px);
    padding: 32px 28px;
    border-top: 3px solid var(--accent, #c5a03e);
    margin-top: 24px;
    box-shadow: var(--bhz-tool-shadow, 0 6px 28px rgb(0 0 0 / 6%));
    animation: bhzToolResultIn 0.42s ease-out;
}

@keyframes bhzToolResultIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-value,
.calc-result-value {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--bhz-tool-accent, #5c4338);
    line-height: 1.1;
    font-feature-settings: 'tnum';
}

.result-label,
.calc-result-label {
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--beherzig-brown-80, #73574a);
    font-weight: 600;
    margin-bottom: 6px;
}

/* -- Grid: 2-column layout (input | result) on desktop, stacked mobile -- */
.calc-grid,
.tool-grid {
    display: grid;
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto 80px;
    padding: 0 24px;
}

@media (width >= 900px) {
    .calc-grid,
    .tool-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* -- Reduced motion respect -- */
@media (prefers-reduced-motion: reduce) {
    .calc-submit,
    .tool-submit,
    button[type='submit'],
    .calc-result,
    .tool-result {
        transition: none;
        animation: none;
    }

    .calc-submit:hover,
    .tool-submit:hover {
        transform: none;
    }
}

/* -- Print -- */
@media print {
    .calc-submit,
    .tool-submit,
    button[type='submit'],
    nav.beherzig-navigation,
    footer.beherzig-footer {
        display: none !important;
    }

    .calc-panel,
    .tool-panel,
    .calc-result,
    .tool-result {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    .calc-header h1,
    .tool-header h1 {
        font-size: 18pt;
    }
}

/* -- Dark mode -- */
@media (prefers-color-scheme: dark) {
    .calc-panel,
    .tool-panel,
    .quiz-panel {
        background: #2a2624;
        color: #e8e6e3;
    }

    .calc-panel h2,
    .tool-panel h2 {
        color: #e8e6e3;
        border-bottom-color: rgb(255 255 255 / 8%);
    }

    .field label {
        color: #e8e6e3;
    }

    .field input,
    .field select,
    .field textarea {
        background: #1a1918;
        color: #e8e6e3;
        border-color: rgb(255 255 255 / 16%);
    }

    .calc-header,
    .tool-header {
        border-bottom-color: rgb(255 255 255 / 6%);
    }

    .calc-header h1,
    .tool-header h1 {
        color: #e8e6e3;
    }

    .calc-header p,
    .tool-header p {
        color: rgb(232 230 227 / 78%);
    }

    .calc-result,
    .tool-result,
    .result-card {
        background: linear-gradient(135deg, #2a2624 0%, rgb(42 38 36 / 70%) 100%);
    }

    .result-value,
    .calc-result-value {
        color: var(--accent, #c5a03e);
    }
}