/* ==========================================================================
   COPRO INDUSTRIAL (CONTAINER PROJECTS) - MASTER CSS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Roboto:wght@400;500;700&display=swap');

:root {
    --copro-red: #bc0203;    /* Action/CTA Red */
    --copro-navy: #0d2235;   /* Header/Authority Navy */
    --copro-blue: #00008a;   /* Link Blue */
    --copro-dark: #333333;   /* Body Text */
    --copro-grey: #f4f4f4;   /* Background Grey */
}

/* 1. TYPOGRAPHY & ACCESSIBILITY */
body, p, li { 
    font-family: 'Roboto', sans-serif; 
    color: var(--copro-dark); 
    line-height: 1.8; 
}

a { color: var(--copro-blue); text-decoration: underline; font-weight: 500; }
a:hover { color: var(--copro-red); text-decoration: none; }

h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; line-height: 1.2; margin-bottom: 1.2rem; }

/* 2. ARTICLE WRAPPERS (2px Border Left) */
[class*="style-"] {
    background-color: #ffffff !important;
    padding: 40px !important;
    margin-bottom: 30px !important;
    border-left: 2px solid var(--copro-navy) !important;
    display: block;
}

/* Page Titles - Navy Block Style */
[class*="style-"] h1 {
    display: inline-block;
    background-color: var(--copro-navy) !important;
    color: #ffffff !important;
    padding: 12px 28px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 2.1rem !important;
    border-radius: 0px;
}

h2 { color: var(--copro-navy) !important; font-weight: 800; border-bottom: 1px solid #eee; padding-bottom: 10px; }

/* 3. COPRO CONTACT MODULE (Sidebar) */
.contact-module-copro {
    border: 2px solid var(--copro-navy) !important;
    background: #ffffff;
    margin-bottom: 25px;
    overflow: hidden;
}

.contact-header-copro {
    background-color: var(--copro-navy) !important;
    padding: 15px;
    text-align: center;
}

.contact-header-copro h3 {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 1.4rem !important;
    text-transform: uppercase;
    font-weight: 900;
}

.contact-body-copro { padding: 20px 15px; background: var(--copro-grey); }

.contact-info-grid {
    display: flex;
    text-align: center;
    justify-content: center;
    margin-bottom: 20px;
}

.info-divider { width: 1px; background: #ccc; height: 35px; margin: 0 15px; }

/* RED ACTION BUTTONS */
.contact-btn-copro, .btn-copro-main {
    display: block !important;
    background-color: var(--copro-red) !important;
    color: #ffffff !important;
    text-align: center;
    padding: 14px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-decoration: none !important;
    border-bottom: 3px solid #8a0102; /* 3D Click Affordance */
    transition: 0.2s;
}

.contact-btn-copro:hover, .btn-copro-main:hover {
    background-color: #e60000 !important;
    transform: translateY(2px);
    border-bottom-width: 1px;
}

/* 4. LANDSCAPE CTA SLAB */
.landscape-cta-copro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-left: 2px solid var(--copro-red);
    padding: 30px;
    margin: 40px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.btn-copro-sub {
    padding: 12px 24px;
    border: 2px solid var(--copro-navy);
    color: var(--copro-navy) !important;
    font-weight: 800;
    text-decoration: none !important;
}

/* 5. SIDEBAR SPACING */
#sp-right .sp-module, #sp-left .sp-module {
    margin-top: 50px !important;
    padding: 10px;
}

/* 6. MOBILE FIXES */
@media (max-width: 768px) {
    .landscape-cta-copro { flex-direction: column; text-align: center; }
    .cta-btns-copro { flex-direction: column; width: 100%; gap: 10px; margin-top: 20px; }
}