/* Project: Broad Top Area Medical Center (BTAMC) Modernization
 * Theme: Logo-Matched Branding (Green, Blue, & Slate)
 * Standard: WCAG 2.1 Level AA Compliant
 * Updated: 2026-05-11
 */

:root {
    /* Logo-Derived Palette - Contrast Checked for AA Standards */
    --primary-blue: #0071ba;       /* Pass AA: 5.1:1 on White */

    /* Darkened Green for Text/UI Elements to pass 4.5:1 ratio */
    --primary-green: #3d5c22;      

    /* Accent Green for decorative borders and graphics */
    --accent-green: #79b443;       

    /* Darkened to pass 4.5:1 contrast for small text */
    --primary-dark: #454545;       
    --accent-gold: #ffbf47;        /* High-visibility focus state color */

    --text-main: #2d2d2d;          
    --text-muted: #595959;         
    --bg-light: #f8f9fa;           
    --error-red: #d93025;          

    /* Layout Variables */
    --nav-height: 85px;            
    --border-radius: 12px;         
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* --- 1. Base Styles & Accessibility --- */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    color: var(--text-main);       
    line-height: 1.6;              
    background-color: #ffffff;     
    -webkit-font-smoothing: antialiased; 
}

/* High Visibility Focus Ring (WCAG 2.4.7) */
:focus, :focus-visible {
    outline: 3px solid var(--accent-gold) !important; 
    outline-offset: 4px !important; 
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.6) !important; 
}

/* Skip to Content Link (WCAG 2.4.1) */
.skip-link {
    position: absolute;            
    top: -100px;                   
    left: 10px;                    
    background: var(--primary-blue); 
    color: white;                  
    padding: 12px 24px;            
    z-index: 3000;                 
    text-decoration: none;         
    font-weight: bold;             
    border-radius: 0 0 8px 8px;    
    transition: top 0.2s ease;     
}

.skip-link:focus {
    top: 0;                        
}

.visually-hidden {
    position: absolute !important; 
    width: 1px !important;         
    height: 1px !important;        
    padding: 0 !important;         
    margin: -1px !important;       
    overflow: hidden !important;   
    clip: rect(0, 0, 0, 0) !important; 
    white-space: nowrap !important; 
    border: 0 !important;          
}

/* --- 2. Utility Bar, Branding & Translate --- */
header .bg-light {
    background-color: var(--primary-dark) !important; 
    border-bottom: 4px solid var(--accent-green) !important; 
    padding: 12px 0;                
    color: #ffffff;                
}

/* Google Translate Widget Styling */
#google_translate_element {
    display: inline-block;
    padding: 5px 0;
}

/* Customizing the Widget to keep the header minimal */
.goog-logo-link {
    display: none !important;
}
.goog-te-gadget {
    color: transparent !important;
}
.goog-te-gadget .goog-te-combo {
    padding: 4px;
    border-radius: 4px;
    border: 1px solid var(--accent-green);
    background: white;
    font-family: 'Inter', sans-serif;
}
.goog-te-gadget > span > a {
    display: none !important;
}

/* * FINAL ANTI-SQUISH SEAL CONTAINER:
 * Expanded dimensions and flexible image scaling to prevent 
 * internal compression of script elements.
 */
.site-seal {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    justify-content: center !important;
    width: 220px !important;       
    height: 145px !important;      
    overflow: visible !important;  
    background: #ffffff !important; 
    border-radius: 10px !important; 
    padding: 15px !important;      
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border: 1px solid #e0e0e0 !important;
}

#siteseal {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

#siteseal img {
    filter: none !important; 
    height: auto !important;       
    max-height: 85px !important;   
    width: auto !important;         
    max-width: 100% !important;
    display: inline-block !important;
    object-fit: contain !important; 
}

/* Styled text for the verified date to ensure high contrast in the box */
#siteseal *:not(img) {
    display: block !important;
    visibility: visible !important;
    font-size: 0.85rem !important;  
    color: #000000 !important;     
    margin-top: 10px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

/* --- 3. Main Navigation --- */
.navbar {
    background: #ffffff;           
    padding: 0;                    
    min-height: var(--nav-height); 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); 
    z-index: 1000;                 
}

.navbar-nav {
    display: flex;                 
    flex-wrap: wrap;               
    justify-content: center;       
    width: 100%;                   
}

.navbar-brand img {
    max-height: 65px;              
    width: auto;                   
    padding: 10px 0;               
}

.nav-link {
    font-size: 0.85rem;            
    font-weight: 700;              
    text-transform: uppercase;     
    letter-spacing: 0.5px;         
    color: var(--primary-dark) !important; 
    padding: 20px 10px !important; 
    position: relative;            
    transition: var(--transition); 
}

.nav-link:hover, .nav-link:focus {
    color: var(--primary-blue) !important; 
    background-color: rgba(0, 113, 186, 0.08); 
}

.nav-link.active {
    color: #ffffff !important;     
    background-color: var(--primary-blue); 
}

.nav-link::after {
    content: '';                   
    position: absolute;            
    width: 0;                      
    height: 4px;                   
    bottom: 0;                     
    left: 50%;                     
    background-color: var(--accent-green); 
    transition: var(--transition); 
    transform: translateX(-50%);   
}

.nav-link:hover::after {
    width: 100%;                   
}

/* --- 4. Hero Sections --- */
.hero-section {
    background: linear-gradient(
        rgba(0, 40, 80, 0.85),
        rgba(61, 92, 34, 0.85)
    ),
    url('../images/stretcher_medical_consultation_470502.jpg') no-repeat center center; 
    background-size: cover;        
    background-attachment: fixed;  
    color: white;                  
    padding: 100px 0 !important;   
}

.text-warning {
    color: var(--accent-green) !important; 
    font-weight: 800;              
}

/* --- 5. Integrated Care & General Cards --- */
.header-line {
    width: 80px;                   
    height: 4px;                   
    background-color: var(--accent-green); 
    margin-top: 15px;              
    border-radius: 2px;            
}

.table-responsive[tabindex="0"]:focus {
    outline: 3px solid var(--accent-gold) !important; 
    border-radius: 8px;            
}

.btn-primary {
    background-color: var(--primary-blue) !important; 
    border: none !important;       
    font-weight: 700;              
    transition: var(--transition); 
    color: #ffffff !important;     
    display: flex;                 
    align-items: center;           
    justify-content: center;       
    min-height: 60px;              
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-dark) !important; 
    color: var(--accent-green) !important; 
    transform: translateY(-2px);   
}

/* --- 6. Staff Image & Provider Styles --- */
.staff-img {
    width: 150px;                  
    height: 150px;                 
    object-fit: cover;             
    border: 4px solid var(--bg-light); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

.staff-card {
    transition: var(--transition); 
    border: 1px solid #eee;        
    min-height: 320px;             
    display: flex;                 
    flex-direction: column;        
    justify-content: center;       
    background-color: #ffffff;     
    border-radius: var(--border-radius); 
    height: 100%;                  
}

.staff-card:hover {
    transform: translateY(-5px);   
    border-color: var(--primary-blue); 
}

/* --- Carousel Control Alignment Fix --- */
.carousel-controls-container {
    display: flex;                 
    justify-content: center;       
    align-items: center;           
    gap: 1rem;                     
    margin-top: 1.5rem;            
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) grayscale(100) brightness(0); 
    width: 24px;                   
    height: 24px;                  
}

.carousel-controls-container .btn-primary {
    width: 48px;                   /* WCAG 44px touch target compliance */
    height: 48px;                  
    min-height: auto;              
    padding: 0 !important;         
    border-radius: 50% !important; 
}

.carousel-pause-toggle {
    background: none;              
    border: 2px solid var(--primary-blue); 
    color: var(--primary-blue);    
    border-radius: 20px;           
    padding: 8px 20px;             
    font-weight: 700;              
    transition: var(--transition); 
    min-height: 44px;              
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin: 0 !important;          
}

.carousel-pause-toggle:hover, .carousel-pause-toggle:focus {
    background-color: var(--primary-blue); 
    color: #ffffff;                
}

/* --- 7. Location Directory Optimization --- */
.location-full-img-container {
    width: 100%;                   
    background-color: var(--bg-light); 
    border-bottom: 4px solid var(--accent-green); 
    overflow: hidden;              
    position: relative;            
}

.location-full-img-container img {
    width: 100%;                   
    height: auto;                  
    display: block;                
    transition: var(--transition); 
}

.card:hover .location-full-img-container img {
    transform: scale(1.03);        
}

.location-card-title a {
    color: var(--primary-blue);    
    text-decoration: underline;    
    text-underline-offset: 3px;    
}

/* --- 8. Wellness & List Styles --- */
.wellness-bullet-list {
    list-style: none;              
    padding: 0;                    
    margin: 0;                    
    display: grid;                 
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
    gap: 1rem 2rem;                
}

.wellness-bullet-list li {
    position: relative;            
    padding-left: 1.75rem;         
    color: var(--text-main);       
}

.wellness-bullet-list li::before {
    content: "•";                 
    position: absolute;            
    left: 0;                       
    color: var(--primary-blue);    
    font-weight: bold;             
    font-size: 1.5rem;             
    top: -2px;                     
}

/* --- 9. Donation Page --- */
.img-donation-hero {
    max-width: 600px;              
    width: 100%;                   
    margin-left: auto;             
    margin-right: auto;            
    display: block;                
}

/* --- 10. Hotline & Action Section --- */
.btn-hotline {
    background-color: var(--error-red) !important; 
    color: #ffffff !important;     
    padding: 15px 30px;            
    font-size: 1.35rem;            
    font-weight: 800;              
    border-radius: 50px;           
    text-decoration: none;         
    transition: var(--transition); 
    box-shadow: 0 4px 12px rgba(217, 48, 37, 0.2); 
    border: none;                  
    text-align: center;            
    display: inline-flex;          
    align-items: center;           
    justify-content: center;       
    min-height: 80px;              
    min-width: 300px;              
}

.btn-hotline:hover, .btn-hotline:focus {
    background-color: var(--primary-dark) !important; 
    transform: translateY(-2px);   
}

/* Compliance Hotline Icon Fix */
.hotline-icon-img {
    max-width: 80px;               /* Constrains the red phone icon size */
    height: auto;
    object-fit: contain;
}

.hotline-icon-wrapper {
    flex-shrink: 0;                /* Prevents icon from squishing on mobile */
}

/* --- 11. Footer & Copyright Bar --- */
.copyright-bar {
    border-top: 4px solid var(--accent-green); 
    letter-spacing: 0.5px;         
    background-color: var(--primary-blue); 
}

.copyright-bar p {
    color: #ffffff !important;     
}

/* --- 12. Responsive Breakpoints --- */
@media (max-width: 1400px) {
    .navbar-expand-xl .navbar-toggler {
        display: block;            
        border: 2px solid var(--primary-blue); 
    }
    .navbar-nav {
        flex-direction: column;    
        align-items: flex-start;   
    }
    .nav-link {
        padding: 15px 20px !important; 
        border-bottom: 1px solid #f0f0f0; 
        width: 100%;               
    }
    .nav-link::after { display: none; } 
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 0 !important; 
        background-attachment: scroll; 
    }
    .btn-hotline {
        font-size: 1.1rem;         
        padding: 15px;             
        width: 100%;               
        min-height: 70px;          
    }
    .carousel-controls-container {
        flex-wrap: wrap;               
    }
    .hotline-icon-img {
        max-width: 60px;           /* Slightly smaller for mobile screens */
    }
}