/* ==========================================
   PIPE VOLUME CALCULATOR - NON-CRITICAL CSS
   ========================================== */

.method-label:hover { background: #f8fafc; }
.method-option input[type="radio"]:checked + .method-label .radio-circle { box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.1); }
.left-panel, .right-panel { transition: box-shadow 0.3s ease; }
.input-field { transition: all 0.2s ease; }
.custom-option { transition: background 0.2s; }
.calc-error::before { margin-right: 6px; }

.article-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 48px; margin-bottom: 16px; color: #1e293b; scroll-margin-top: 100px; }
.article-content h3 { font-size: 1.125rem; font-weight: 600; margin-top: 24px; margin-bottom: 12px; color: #1e293b; }
.article-content p { margin-bottom: 16px; color: #475569; line-height: 1.7; font-size: 1rem; }
.article-content ul { margin-bottom: 16px; padding-left: 20px; color: #475569; line-height: 1.7; font-size: 1rem; }
.article-content li { margin-bottom: 8px; }

@media (max-width: 768px) {
    .article-content { padding: 24px 8px 48px; }
    .article-content h2 { font-size: 1.25rem; margin-top: 32px; }
    .article-content h3 { font-size: 1rem; }
    .article-content p, .article-content ul { font-size: 0.95rem; }
}

.related-calculators-grid a { transition: all 0.2s ease; }
.related-calculators-grid a:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }