/*
Theme Name: JSL Drainage Bootstrap
Author: Gemini Assistant
Description: Conversion-optimized Bootstrap 5 theme for JSL Drainage.
Version: 1.2
Text Domain: jsl-bootstrap
*/

:root {
    --jsl-blue: #383f92;
    --jsl-dark: #232323;
    --bs-border-radius-lg: 20px; /* Modern rounded corners */
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--jsl-dark);
    line-height: 1.6;
}

header img[alt*="Qualified"], 
header img[alt*="Registered"] {
    transition: opacity 0.3s ease;
    filter: grayscale(10%) contrast(110%);
}

/* 1. Backgrounds & Text */
.bg-primary { background-color: var(--jsl-blue) !important; }
.text-primary { color: var(--jsl-blue) !important; }

/* 2. Fix for .border-primary */
.border-primary { 
    border-color: var(--jsl-blue) !important; 
}

/* 3. Fix for .btn-primary */
.btn-primary {
    background-color: var(--jsl-blue) !important;
    border-color: var(--jsl-blue) !important;
}
.btn-primary:hover {
    background-color: #2a2f6e !important;
    border-color: #2a2f6e !important;
}

/* 4. Fix for .btn-outline-primary (the "Read More" buttons) */
.btn-outline-primary {
    color: var(--jsl-blue) !important;
    border-color: var(--jsl-blue) !important;
}
.btn-outline-primary:hover {
    background-color: var(--jsl-blue) !important;
    border-color: var(--jsl-blue) !important;
    color: #fff !important;
}

/* 5. Rounded Corners Fix */
.rounded-4, .rounded-3 {
    border-radius: var(--bs-border-radius-lg) !important;
}

/* 6. Clicky Button Animation (Updated shadow color to match JSL Blue) */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 63, 146, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(56, 63, 146, 0); }
  100% { transform: scale(1); }
}
.pulse-call { animation: pulse 2s infinite; }

/* Sticky Mobile Adjustments */
@media (max-width: 767px) {
    body { padding-bottom: 80px; }
    h1 { font-size: 1.8rem; }
}