/* CSP Compliance Utility Classes */
/* These classes replace common inline styles to allow for the removal of 'unsafe-inline' from the CSP style-src directive. */

.csp-w-100 { width: 100px !important; }
.csp-w-150 { width: 150px !important; }
.csp-w-200 { width: 200px !important; }
.csp-w-250 { width: 250px !important; }
.csp-w-300 { width: 300px !important; }

.csp-h-100 { height: 100% !important; }

.csp-font-14 { font-size: 14px !important; }
.csp-font-20 { font-size: 20px !important; }
.csp-font-22 { font-size: 22px !important; }
.csp-font-32 { font-size: 32px !important; }
.csp-font-40 { font-size: 40px !important; }
.csp-font-1-25 { font-size: 1.25rem !important; }
.csp-font-weight-700 { font-weight: 700 !important; }

.csp-main-color { color: var(--main-color) !important; }
.csp-color-666 { color: #666 !important; }
.csp-white { color: #fff !important; }
.csp-white-70 { color: rgba(255,255,255,0.7) !important; }
.csp-white-important { color: #fff !important; }

.csp-mt-15 { margin-top: 15px !important; }
.csp-mb-8 { margin-bottom: 8px !important; }
.csp-mb-20 { margin-bottom: 20px !important; }
.csp-mr-8 { margin-right: 8px !important; }

.csp-display-inline-block { display: inline-block !important; }
.csp-background-none { background: none !important; }
.csp-padding-0 { padding: 0 !important; }
.csp-list-style-none { list-style-type: none !important; }
.csp-padding-left-0 { padding-left: 0 !important; }

/* Complex Patterns */
.csp-card-border {
    height: 100%;
    border-radius: 10px;
    border: 1px solid #eee;
}

.csp-blog-card-border {
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.csp-impact-icon {
    font-size: 32px;
    color: var(--main-color);
}

.csp-footer-logo {
    width: 300px;
}

.csp-navbar-logo {
    width: 250px;
}

.csp-value-card {
    height: 100%;
    border-radius: 10px;
    border: 1px solid #eee;
    background-color: #fff;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    padding: 15px;
}