/* Strategic Solutions for MedTech - Brand Overrides */
/* Custom CSS for Crafto Template Customization */

/* ========================================
   1. GOOGLE FONTS IMPORT
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');

/* ========================================
   2. CSS CUSTOM PROPERTIES (Variables)
   ======================================== */
:root {
    /* Brand Colors */
    --primary-color: #409769;
    --primary-hover: #367d57;
    --primary-light: #5ab382;
    --primary-dark: #2d7050;

    /* Text Colors */
    --text-dark: #282828;
    --text-medium: #666666;
    --text-light: #999999;

    /* Background Colors */
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;

    /* Additional */
    --success-color: #409769;
    --warning-color: #f39c12;
    --error-color: #e74c3c;
}

/* ========================================
   3. TYPOGRAPHY
   ======================================== */
body {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6,
.alt-font {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}

/* ========================================
   4. PRIMARY COLOR OVERRIDES
   ======================================== */

/* Text Colors */
.text-base-color,
a.text-base-color,
.text-base-color:hover {
    color: var(--primary-color) !important;
}

/* Background Colors */
.bg-base-color {
    background-color: var(--primary-color) !important;
}

/* Border Colors */
.border-color-base-color {
    border-color: var(--primary-color) !important;
}

/* ========================================
   5. BUTTON STYLES
   ======================================== */
.btn-base-color {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn-base-color:hover,
.btn-base-color:focus,
.btn-base-color:active {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--white);
}

.btn-outline-base-color {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-base-color:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

/* ========================================
   6. LINK STYLES
   ======================================== */
a {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-hover);
}

.text-decoration-line-bottom-base-color {
    border-bottom-color: var(--primary-color);
}

/* ========================================
   7. ICON STYLES
   ======================================== */
.icon-base-color,
.feather.text-base-color,
i.text-base-color {
    color: var(--primary-color) !important;
}

/* ========================================
   8. FORM ELEMENTS
   ======================================== */
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(64, 151, 105, 0.25);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Accessibility: Form placeholder contrast (WCAG AA compliant) */
.form-control::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

.form-control::-webkit-input-placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

.form-control::-moz-placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

.form-control:-ms-input-placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

select.form-control {
    color: #666666;
}

select.form-control option[value=""] {
    color: #666666;
}

/* Form input text should be dark */
.form-control {
    color: var(--text-dark) !important;
    border-color: #cccccc !important;
}

/* ========================================
   9. NAVIGATION OVERRIDES
   ======================================== */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-color) !important;
}

/* Dropdown Menu Styling */
.dropdown-menu {
    background-color: var(--text-dark) !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dropdown-menu .dropdown-item,
.dropdown-menu a,
header .dropdown-menu a {
    color: #ffffff !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover,
header .dropdown-menu a:hover {
    color: var(--primary-color) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   10. COMPONENT SPECIFIC
   ======================================== */

/* Progress bars */
.progress-bar {
    background-color: var(--primary-color);
}

/* Pie charts */
.pie-chart-style-01 {
    --chart-color: var(--primary-color);
}

/* Feature boxes */
.feature-box-icon i {
    color: var(--primary-color);
}

/* Testimonial rating stars */
.review-star-icon i {
    color: var(--primary-color);
}

/* Accordion active */
.accordion-item.active-accordion .accordion-header a {
    color: var(--primary-color);
}

/* ========================================
   11. FOOTER OVERRIDES
   ======================================== */
footer .text-base-color {
    color: var(--primary-color) !important;
}

/* ========================================
   12. PARTICLE BACKGROUND COLOR
   ======================================== */
/* Override particle colors in JS data attributes where needed */

/* ========================================
   13. SCROLL PROGRESS
   ======================================== */
.scroll-progress .scroll-point {
    background-color: var(--primary-color);
}

/* ========================================
   14. CUSTOM UTILITY CLASSES
   ======================================== */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.shadow-primary {
    box-shadow: 0 10px 30px rgba(64, 151, 105, 0.2);
}

/* ========================================
   15. LOGO SIZING
   ======================================== */
.navbar-brand img,
header .navbar-brand img,
.header-with-topbar .navbar-brand img {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
}

.navbar-brand .default-logo,
.navbar-brand .alt-logo,
.navbar-brand .mobile-logo {
    height: 50px !important;
    max-height: 50px !important;
}

.footer-logo img {
    height: 45px !important;
    max-height: 45px !important;
    width: auto !important;
}

/* ========================================
   16. ACCESSIBILITY - TEXT CONTRAST FIXES
   ======================================== */
/* Override medium-gray text for better readability (WCAG AA compliant) */
.text-medium-gray,
.btn-link.text-medium-gray,
a.text-medium-gray,
span.text-medium-gray,
p.text-medium-gray {
    color: #666666 !important;
}

/* Footer links should remain slightly lighter but still readable */
footer a.text-medium-gray:hover {
    color: var(--primary-color) !important;
}

/* ========================================
   17. RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 991px) {
    .navbar-brand img,
    .mobile-logo,
    header .navbar-brand img {
        height: 40px !important;
        max-height: 40px !important;
    }
}

@media (max-width: 575px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.75rem;
    }
}

/* ========================================
   18. CUSTOM SIZE UTILITIES
   ======================================== */
/* Width and height utilities for icons and avatars */
.w-60px {
    width: 60px !important;
}
.h-60px {
    height: 60px !important;
}
.w-70px {
    width: 70px !important;
}
.h-70px {
    height: 70px !important;
}

/* Background opacity utility */
.bg-opacity-20 {
    --bs-bg-opacity: 0.2;
}