/*
 * Nutrition Theme CSS
 * Green-based color scheme for health and nutrition website
 */

:root {
    /* Primary Green Colors */
    --nutrition-primary: #16a34a;
    --nutrition-primary-hover: #15803d;
    --nutrition-primary-light: #22c55e;
    --nutrition-primary-dark: #166534;
    
    /* Secondary Colors */
    --nutrition-secondary: #059669;
    --nutrition-secondary-hover: #047857;
    --nutrition-secondary-light: #10b981;
    
    /* Accent Colors */
    --nutrition-accent: #10b981;
    --nutrition-accent-light: #34d399;
    
    /* Status Colors */
    --nutrition-success: #22c55e;
    --nutrition-warning: #f59e0b;
    --nutrition-danger: #ef4444;
    --nutrition-info: #06b6d4;
    
    /* Background Colors */
    --nutrition-bg-light: #f0fdf4;
    --nutrition-bg-lighter: #f7fee7;
    --nutrition-bg-white: #ffffff;
    
    /* Text Colors */
    --nutrition-text-primary: #14532d;
    --nutrition-text-secondary: #166534;
    --nutrition-text-muted: #6b7280;
    
    /* Border Colors */
    --nutrition-border: #dcfce7;
    --nutrition-border-light: #ecfdf5;
    
    /* Shadow Colors */
    --nutrition-shadow: rgba(22, 163, 74, 0.1);
    --nutrition-shadow-hover: rgba(22, 163, 74, 0.2);
}

/* Logo and Brand Colors */
.navbar-brand {
    color: var(--nutrition-primary) !important;
}

.navbar-brand:hover {
    color: var(--nutrition-primary-hover) !important;
}

/* Button Styles */
.btn-primary {
    background-color: var(--nutrition-primary);
    border-color: var(--nutrition-primary);
}

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

.btn-success {
    background-color: var(--nutrition-success);
    border-color: var(--nutrition-success);
}

.btn-outline-primary {
    color: var(--nutrition-primary);
    border-color: var(--nutrition-primary);
}

.btn-outline-primary:hover {
    background-color: var(--nutrition-primary);
    border-color: var(--nutrition-primary);
}

/* Badge Styles */
.badge.bg-primary {
    background-color: var(--nutrition-primary) !important;
}

.badge.bg-success {
    background-color: var(--nutrition-success) !important;
}

/* Card Styles */
.card:hover {
    box-shadow: 0 4px 15px var(--nutrition-shadow-hover);
    border-color: var(--nutrition-border);
}

.card-header.bg-primary {
    background-color: var(--nutrition-primary) !important;
}

/* Alert Styles */
.alert-success {
    background-color: var(--nutrition-bg-light);
    border-color: var(--nutrition-border);
    color: var(--nutrition-text-primary);
}

/* Navigation Styles */
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--nutrition-primary) !important;
}

.navbar-light .navbar-nav .nav-link.active {
    color: var(--nutrition-primary) !important;
}

/* Link Styles */
a {
    color: var(--nutrition-primary);
}

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

/* Form Styles */
.form-control:focus {
    border-color: var(--nutrition-primary);
    box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.25);
}

.form-select:focus {
    border-color: var(--nutrition-primary);
    box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.25);
}

/* Text Utilities */
.text-primary {
    color: var(--nutrition-primary) !important;
}

.text-success {
    color: var(--nutrition-success) !important;
}

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

.bg-light-green {
    background-color: var(--nutrition-bg-light) !important;
}

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

/* Food and Product Card Enhancements */
.food-card:hover,
.product-card:hover {
    box-shadow: 0 8px 25px var(--nutrition-shadow-hover);
    transform: translateY(-2px);
}

.food-title-link:hover {
    color: var(--nutrition-primary) !important;
}

/* Nutrition Badge Styles */
.nutrition-badge {
    background: var(--nutrition-success);
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* Health Tools Specific */
.health-tools-header {
    background: linear-gradient(135deg, var(--nutrition-primary) 0%, var(--nutrition-primary-hover) 50%, var(--nutrition-primary-dark) 100%);
    min-height: auto !important;
    padding: 1rem 0;
    display: flex;
    align-items: center;
}

.health-tools-header .container {
    padding-left: 2rem;
    padding-right: 2rem;
}

.health-tools-header .container {
    width: 100%;
}

/* Override any min-height for gradient backgrounds */
.bg-gradient-primary,
.bg-gradient-dark,
.bg-gradient-info,
.bg-gradient-warning,
.bg-gradient-success,
.bg-gradient-secondary,
.bg-gradient-danger {
    min-height: auto !important;
    padding: 1rem 0;
    display: flex;
    align-items: center;
}

.bg-gradient-primary .container,
.bg-gradient-dark .container,
.bg-gradient-info .container,
.bg-gradient-warning .container,
.bg-gradient-success .container,
.bg-gradient-secondary .container,
.bg-gradient-danger .container {
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Text content spacing within gradient headers */
.health-tools-header .container,
.bg-gradient-primary .container,
.bg-gradient-dark .container,
.bg-gradient-info .container,
.bg-gradient-warning .container,
.bg-gradient-success .container,
.bg-gradient-secondary .container,
.bg-gradient-danger .container {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Text elements spacing */
.health-tools-header h1,
.health-tools-header h2,
.health-tools-header h3,
.health-tools-header p,
.bg-gradient-primary h1,
.bg-gradient-primary h2,
.bg-gradient-primary h3,
.bg-gradient-primary p,
.bg-gradient-dark h1,
.bg-gradient-dark h2,
.bg-gradient-dark h3,
.bg-gradient-dark p,
.bg-gradient-info h1,
.bg-gradient-info h2,
.bg-gradient-info h3,
.bg-gradient-info p,
.bg-gradient-warning h1,
.bg-gradient-warning h2,
.bg-gradient-warning h3,
.bg-gradient-warning p,
.bg-gradient-success h1,
.bg-gradient-success h2,
.bg-gradient-success h3,
.bg-gradient-success p,
.bg-gradient-secondary h1,
.bg-gradient-secondary h2,
.bg-gradient-secondary h3,
.bg-gradient-secondary p,
.bg-gradient-danger h1,
.bg-gradient-danger h2,
.bg-gradient-danger h3,
.bg-gradient-danger p {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.tool-icon {
    background: rgba(22, 163, 74, 0.1);
    color: var(--nutrition-primary);
}

/* Category Cards */
.category-card:hover {
    box-shadow: 0 8px 20px var(--nutrition-shadow-hover);
    border-color: var(--nutrition-primary);
}

/* Search Results */
.food-image-link:hover .food-image {
    filter: brightness(1.1);
}

/* Better text readability in gradient headers */
.health-tools-header h1,
.health-tools-header h2,
.health-tools-header h3,
.bg-gradient-primary h1,
.bg-gradient-primary h2,
.bg-gradient-primary h3,
.bg-gradient-dark h1,
.bg-gradient-dark h2,
.bg-gradient-dark h3,
.bg-gradient-info h1,
.bg-gradient-info h2,
.bg-gradient-info h3,
.bg-gradient-warning h1,
.bg-gradient-warning h2,
.bg-gradient-warning h3,
.bg-gradient-success h1,
.bg-gradient-success h2,
.bg-gradient-success h3,
.bg-gradient-secondary h1,
.bg-gradient-secondary h2,
.bg-gradient-secondary h3,
.bg-gradient-danger h1,
.bg-gradient-danger h2,
.bg-gradient-danger h3 {
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Icon spacing in gradient headers */
.health-tools-header h1 i,
.health-tools-header h2 i,
.health-tools-header h3 i,
.bg-gradient-primary h1 i,
.bg-gradient-primary h2 i,
.bg-gradient-primary h3 i,
.bg-gradient-dark h1 i,
.bg-gradient-dark h2 i,
.bg-gradient-dark h3 i,
.bg-gradient-info h1 i,
.bg-gradient-info h2 i,
.bg-gradient-info h3 i,
.bg-gradient-warning h1 i,
.bg-gradient-warning h2 i,
.bg-gradient-warning h3 i,
.bg-gradient-success h1 i,
.bg-gradient-success h2 i,
.bg-gradient-success h3 i,
.bg-gradient-secondary h1 i,
.bg-gradient-secondary h2 i,
.bg-gradient-secondary h3 i,
.bg-gradient-danger h1 i,
.bg-gradient-danger h2 i,
.bg-gradient-danger h3 i {
    margin-right: 0.75rem;
    margin-left: 0;
}

.health-tools-header p,
.bg-gradient-primary p,
.bg-gradient-dark p,
.bg-gradient-info p,
.bg-gradient-warning p,
.bg-gradient-success p,
.bg-gradient-secondary p,
.bg-gradient-danger p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Icon spacing in buttons within gradient headers */
.health-tools-header .btn i,
.bg-gradient-primary .btn i,
.bg-gradient-dark .btn i,
.bg-gradient-info .btn i,
.bg-gradient-warning .btn i,
.bg-gradient-success .btn i,
.bg-gradient-secondary .btn i,
.bg-gradient-danger .btn i {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* Icon spacing in links within gradient headers */
.health-tools-header a i,
.bg-gradient-primary a i,
.bg-gradient-dark a i,
.bg-gradient-info a i,
.bg-gradient-warning a i,
.bg-gradient-success a i,
.bg-gradient-secondary a i,
.bg-gradient-danger a i {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* Standalone icons in gradient headers */
.health-tools-header i.fa-3x,
.health-tools-header i.fa-2x,
.health-tools-header i.fa-lg,
.bg-gradient-primary i.fa-3x,
.bg-gradient-primary i.fa-2x,
.bg-gradient-primary i.fa-lg,
.bg-gradient-dark i.fa-3x,
.bg-gradient-dark i.fa-2x,
.bg-gradient-dark i.fa-lg,
.bg-gradient-info i.fa-3x,
.bg-gradient-info i.fa-2x,
.bg-gradient-info i.fa-lg,
.bg-gradient-warning i.fa-3x,
.bg-gradient-warning i.fa-2x,
.bg-gradient-warning i.fa-lg,
.bg-gradient-success i.fa-3x,
.bg-gradient-success i.fa-2x,
.bg-gradient-success i.fa-lg,
.bg-gradient-secondary i.fa-3x,
.bg-gradient-secondary i.fa-2x,
.bg-gradient-secondary i.fa-lg,
.bg-gradient-danger i.fa-3x,
.bg-gradient-danger i.fa-2x,
.bg-gradient-danger i.fa-lg {
    margin-right: 1rem;
    margin-left: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nutrition-mobile-friendly {
        padding: 0.5rem;
    }

    .health-tools-header,
    .bg-gradient-primary,
    .bg-gradient-dark,
    .bg-gradient-info,
    .bg-gradient-warning,
    .bg-gradient-success,
    .bg-gradient-secondary,
    .bg-gradient-danger {
        min-height: 150px !important;
        padding: 1rem 0 !important;
        text-align: center;
    }

    /* Mobile container padding */
    .health-tools-header .container,
    .bg-gradient-primary .container,
    .bg-gradient-dark .container,
    .bg-gradient-info .container,
    .bg-gradient-warning .container,
    .bg-gradient-success .container,
    .bg-gradient-secondary .container,
    .bg-gradient-danger .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Mobile icon spacing adjustments */
    .health-tools-header h1 i,
    .health-tools-header h2 i,
    .health-tools-header h3 i,
    .bg-gradient-primary h1 i,
    .bg-gradient-primary h2 i,
    .bg-gradient-primary h3 i,
    .bg-gradient-dark h1 i,
    .bg-gradient-dark h2 i,
    .bg-gradient-dark h3 i,
    .bg-gradient-info h1 i,
    .bg-gradient-info h2 i,
    .bg-gradient-info h3 i,
    .bg-gradient-warning h1 i,
    .bg-gradient-warning h2 i,
    .bg-gradient-warning h3 i,
    .bg-gradient-success h1 i,
    .bg-gradient-success h2 i,
    .bg-gradient-success h3 i,
    .bg-gradient-secondary h1 i,
    .bg-gradient-secondary h2 i,
    .bg-gradient-secondary h3 i,
    .bg-gradient-danger h1 i,
    .bg-gradient-danger h2 i,
    .bg-gradient-danger h3 i {
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
    }

    /* Mobile large icons */
    .health-tools-header i.fa-3x,
    .health-tools-header i.fa-2x,
    .health-tools-header i.fa-lg,
    .bg-gradient-primary i.fa-3x,
    .bg-gradient-primary i.fa-2x,
    .bg-gradient-primary i.fa-lg,
    .bg-gradient-dark i.fa-3x,
    .bg-gradient-dark i.fa-2x,
    .bg-gradient-dark i.fa-lg,
    .bg-gradient-info i.fa-3x,
    .bg-gradient-info i.fa-2x,
    .bg-gradient-info i.fa-lg,
    .bg-gradient-warning i.fa-3x,
    .bg-gradient-warning i.fa-2x,
    .bg-gradient-warning i.fa-lg,
    .bg-gradient-success i.fa-3x,
    .bg-gradient-success i.fa-2x,
    .bg-gradient-success i.fa-lg,
    .bg-gradient-secondary i.fa-3x,
    .bg-gradient-secondary i.fa-2x,
    .bg-gradient-secondary i.fa-lg,
    .bg-gradient-danger i.fa-3x,
    .bg-gradient-danger i.fa-2x,
    .bg-gradient-danger i.fa-lg {
        margin-right: 0.75rem !important;
        margin-left: 0 !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --nutrition-bg-light: #14532d;
        --nutrition-bg-white: #1f2937;
        --nutrition-text-primary: #ecfdf5;
        --nutrition-text-secondary: #dcfce7;
    }
}