/*
 * Special Needs Subdomain Stylesheet
 * 
 * Overrides the default theme variables to use a light, accessible blue palette.
 */

:root {
    /* Backgrounds: New Custom Palette */
    --background: #E6F5FF;         /* Light Blue */
    --foreground: #4D483B;         /* Dark Brown/Grey for text */
    
    /* Cards and Inputs */
    --card: #FFFFFF;               
    --card-foreground: #4D483B;
    --popover: #FFFFFF;
    --popover-foreground: #4D483B;
    
    /* Brand Colors */
    --primary: #1C71A6;            /* Dark Blue */
    --primary-foreground: #FFFFFF; 
    
    --secondary: #F0B23E;          /* Yellow/Orange */
    --secondary-foreground: #4D483B;
    
    /* States & Accents */
    --muted: #E6F5FF;              
    --muted-foreground: #4D483B;
    
    --accent: #89B352;             /* Green */
    --accent-foreground: #FFFFFF;
    
    --destructive: #E53E3E;
    --destructive-foreground: #FFFFFF;
    
    /* Borders & Inputs */
    --border: #1C71A6;             
    --input: #FFFFFF;
    --ring: #F0B23E;
}

/* Global Background Override */
body {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
}

/* Hide WooCommerce Category Counts since they include main site products */
.product-categories .count {
    display: none !important;
}

/* Override dark sections to match the new light theme */
.card {
    background-color: var(--card) !important;
    border-color: var(--border) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card h1, .card h2, .card h3, .card h4, .card p, .card div {
    color: var(--foreground);
}

/* Special adjustments for previously dark badges and text */
.badge-primary {
    background-color: rgba(28, 113, 166, 0.15) !important;
    color: var(--primary) !important;
    border-color: rgba(28, 113, 166, 0.3) !important;
}

/* Button overrides for contrast */
.btn-primary {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}
.btn-primary:hover {
    background-color: #155A8A !important;
}

.btn-secondary {
    background-color: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
}

.btn-outline {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.btn-outline:hover {
    background-color: rgba(28, 113, 166, 0.1) !important;
}

/* Navigation adjustments */
#site-header {
    background-color: var(--foreground) !important;
    border-bottom: 1px solid var(--border) !important;
}

#site-header a {
    color: var(--foreground) !important;
}
#site-header a:hover {
    color: var(--primary) !important;
}

/* Footer adjustments */
#site-footer {
    background-color: #4D483B !important;
    color: var(--foreground) !important;
}
#site-footer a {
    color: #F0B23E !important;
}