/* ==========================================
   CAP RATE CALCULATOR - NON-CRITICAL CSS
   ========================================== */

/* ==========================================
   TYPOGRAPHY & FONT INHERITANCE FIXES
   Ensures all nested elements use the main 'Inter' font
   ========================================== */
.article-content .example-block,
.article-content .example-block p,
.article-content .example-block ol,
.article-content .example-block ul,
.article-content .example-block li,
.article-content .example-block h4 {
    font-family: inherit !important;
    line-height: 1.6 !important;
}

/* ==========================================
   HOVER STATES & TRANSITIONS
   ========================================== */
.input-field:hover { border-color: #cbd5e1; }
.currency-compact-select:hover { border-color: #cbd5e1; }
.frequency-select:hover { border-color: #cbd5e1; }

.input-field, .currency-compact-select, .frequency-select { transition: all 0.2s ease; }

/* ==========================================
   ANIMATIONS
   ========================================== */
.result-display { transition: all 0.3s ease; }
.result-value { animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.steps-box { animation: slideIn 0.3s ease; }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   INTERACTIVE ELEMENT ENHANCEMENTS
   ========================================== */
.toggle-switch:hover .toggle-slider { background-color: #94a3b8; }
input:checked + .toggle-slider:hover { background-color: #7c3aed; }

.result-item:hover { background: #f8fafc; border-color: #8b5cf6; }

.frequency-btn:hover:not(.active) { background: #f1f5f9; color: #334155; }

/* ==========================================
   MOBILE RESPONSIVENESS
   ========================================== */
@media (max-width: 768px) {
    .input-with-frequency {
        flex-direction: column;
        gap: 8px;
    }
    .frequency-select {
        width: 100%;
    }
}