/* SAP Resources Plugin - Custom Blue Theme */
/* Overrides Tailwind CSS default blue colors with SAP blue (#0088cc) palette */

/* Background Colors */
.bg-blue-50 { 
    --tw-bg-opacity: 1; 
    background-color: rgb(230 247 255 / var(--tw-bg-opacity, 1)); 
}
.bg-blue-600 { 
    --tw-bg-opacity: 1; 
    background-color: rgb(0 136 204 / var(--tw-bg-opacity, 1))!important;
}
.bg-blue-700 { 
    --tw-bg-opacity: 1; 
    background-color: rgb(0 102 170 / var(--tw-bg-opacity, 1));
    
}

/* Text Colors */
.text-blue-600 { 
    --tw-text-opacity: 1; 
    color: rgb(0 136 204 / var(--tw-text-opacity, 1)); 
}
.text-blue-800 { 
    --tw-text-opacity: 1; 
    color: rgb(0 58 95 / var(--tw-text-opacity, 1)); 
}

/* Border Colors */
.border-blue-200 { 
    --tw-border-opacity: 1; 
    border-color: rgb(145 213 255 / var(--tw-border-opacity, 1)); 
}
.border-blue-300 { 
    --tw-border-opacity: 1; 
    border-color: rgb(105 192 255 / var(--tw-border-opacity, 1)); 
}

/* Ring Colors (focus states) */
.ring-blue-400 { 
    --tw-ring-opacity: 1; 
    --tw-ring-color: rgb(0 136 204 / var(--tw-ring-opacity, 1)); 
}

/* Hover States */
.hover\:bg-blue-700:hover { 
    --tw-bg-opacity: 1; 
    background-color: rgb(0 102 170 / var(--tw-bg-opacity, 1));
    background-color: rgb(33 83 135 / var(--tw-bg-opacity, 1))!important;
}
.hover\:text-blue-800:hover { 
    --tw-text-opacity: 1; 
    color: rgb(0 102 170 / var(--tw-text-opacity, 1)); 
}

/* Focus States */
.focus\:ring-blue-400:focus { 
    --tw-ring-opacity: 1; 
    --tw-ring-color: rgb(0 136 204 / var(--tw-ring-opacity, 1)); 
}

/* Additional focus ring support */
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* Green to Blue conversion for exact matches */
/* These override green classes to use blue colors for consistency */
.bg-green-50 { 
    --tw-bg-opacity: 1; 
    background-color: rgb(230 247 255 / var(--tw-bg-opacity, 1)); 
}
.border-green-200 { 
    --tw-border-opacity: 1; 
    border-color: rgb(145 213 255 / var(--tw-border-opacity, 1)); 
}
.text-green-800 { 
    --tw-text-opacity: 1; 
    color: rgb(0 58 95 / var(--tw-text-opacity, 1)); 
}

/* SAP Plugin specific styles */
.site-header { 
    /*background: #fff; */
    /*padding: 1rem 0; */
    /*border-bottom: 1px solid #dee2e6; */
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}
.site-title { 
    text-decoration: none; 
    color: #333; 
    font-size: 1.25rem; 
    font-weight: bold; 
}
.site-nav a { 
    margin-left: 1rem; 
    text-decoration: none; 
    color: #0088cc; 
    font-weight: 500; 
}
.site-nav a:hover { 
    color: #0066aa; 
}
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}
.header-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
}

@media (max-width: 768px) { 
    .header-flex { 
        flex-direction: column; 
        gap: 1rem; 
    } 
    .site-nav a { 
        margin: 0 0.5rem; 
    } 
}

/* WordPress Integration Styles */
.sap-resources-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.sap-resources-content .bg-gray-100 {
    background-color: transparent;
}

.sap-resources-content h1,
.sap-resources-content h2,
.sap-resources-content h3 {
    color: inherit;
}