/* * Title: VMP Global Styles
 * Author: Nathan Nordby
 * Description: Core variables and utility classes for VMP tools. 
 * Installation: Add to FluentSnippets > New Snippet > CSS > Locations: Header/Everywhere
 */

:root {
    /* Primary Colors */
    --vmp-navy: #0a2342;
    --vmp-red: #b91c1c;
    --vmp-red-hover: #991b1b;
    
    /* Neutral & Brand Support */
    --vmp-white: #ffffff;
    --vmp-bg-grey: #f3f4f6;
    --vmp-green: #0D4704; /* BRM Lincoln Green */
    --vmp-purple: #5B1181; /* BRM Mission Purple */
    
    /* Typography */
    --vmp-font-head: 'Montserrat', 'Oswald', sans-serif;
    --vmp-font-body: 'Open Sans', 'Lato', sans-serif;
}

/* --- Base Component: The Card --- */
/* Usage: <div class="vmp-card">Content...</div> */
.vmp-card {
    background: var(--vmp-white);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* --- Base Component: Primary Button --- */
/* Usage: <a href="#" class="vmp-btn-primary">Click Me</a> */
.vmp-btn-primary {
    background-color: var(--vmp-red);
    color: var(--vmp-white) !important; /* Force override Elementor defaults */
    padding: 12px 24px;
    border-radius: 4px;
    font-family: var(--vmp-font-head);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: center;
}

.vmp-btn-primary:hover, .vmp-btn-primary:focus {
    background-color: var(--vmp-red-hover);
    color: var(--vmp-white) !important;
}

/* --- Base Component: Secondary/Navy Button --- */
.vmp-btn-navy {
    background-color: var(--vmp-navy);
    color: var(--vmp-white) !important;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: var(--vmp-font-head);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.3s ease;
    border: none;
    cursor: pointer;
}

.vmp-btn-navy:hover {
    opacity: 0.9;
}

/* --- Typography Utilities --- */
.vmp-heading {
    color: var(--vmp-navy);
    font-family: var(--vmp-font-head);
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vmp-text {
    color: #333;
    font-family: var(--vmp-font-body);
    font-size: 16px;
    line-height: 1.6;
}

/* --- Accessibility/Form Utilities --- */
.vmp-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px; /* Prevents zoom on iPhone */
    margin-bottom: 15px;
    font-family: var(--vmp-font-body);
}

.vmp-input:focus {
    border-color: var(--vmp-navy);
    outline: 2px solid var(--vmp-navy);
}