/* ==========================================================================
   I. ROOT / GLOBAL STYLES
   ========================================================================== */

/* CSS Variables are now imported from ../shared-code/css-variables.css */

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure proper viewport sizing */
html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, var(--color-bg-light), var(--color-bg), var(--color-bg-dark));
    background-attachment: fixed; /* Ensures gradient stays fixed during scroll */
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh; /* Use min-height instead of height to allow content expansion */
    margin: 0;
    padding: var(--spacing-xl); /* Consistent padding across all pages */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl); /* Additional padding for content */
}

/* Header Styles - REMOVED OLD HEADER STYLES */
/* Note: H1 styles are global and effectively part of the header */
h1 {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 2.4rem; /* Matched standard-of-care-index.html */
    margin-bottom: var(--spacing-xl); /* Matched standard-of-care-index.html */
    padding-bottom: var(--spacing-md); /* Matched standard-of-care-index.html */
    background: linear-gradient(to right, var(--primary), var(--primary-dark)); /* Matched standard-of-care-index.html */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-shadow: 1px 1px 2px var(--color-shadow-light); /* Matched standard-of-care-index.html */
    position: relative;
    letter-spacing: -0.5px; /* Matched standard-of-care-index.html */
    text-align: center; /* Added for centering like index.html main title */
}

h1::after { /* Added h1::after for underline effect like index.html */
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* Matched standard-of-care-index.html */
    height: 4px; /* Matched standard-of-care-index.html */
    background: linear-gradient(to right, var(--primary), var(--primary-light)); /* Matched standard-of-care-index.html */
    border-radius: 2px; /* Matched standard-of-care-index.html */
}

/* REMOVED .subtitle STYLES */

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-light);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(145deg, var(--primary-light), var(--primary));
    border-radius: 6px;
    border: 2px solid var(--color-bg-light);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
}

/* Utility Classes */
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.text-center { text-align: center; }
.text-muted { color: var(--color-text-light); }
.hidden { display: none !important; }

/* General Keyframes for Animations */
/* Animations are now imported from ../shared-code/animations.css */
/* Note: Custom animations that don't exist in animations.css: */

/* REMOVED duplicate animations - use from ../shared-code/animations.css:
   - accordionSlideDown → use slideDown
   - expandDown → use slideDown or scaleIn
   - progressShimmer → already exists in animations.css
*/


/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-md);
    }
    
    h1 {
        font-size: 2rem;
    }
    
    /* These specific responsive rules apply to shared components, 
       so they remain global or are moved to the shared section.
       Keeping them here for now as they are broad. */
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .two-column,
    .three-column {
        grid-template-columns: 1fr;
    }
    
    .tab-navigation { /* Main app tab navigation */
        flex-direction: column;
    }
    
    .tab-button { /* Main app tab buttons */
        width: 100%;
    }
}