/* 
 * Dalcart Contrast Fix - High Visibility Override
 * Ensures proper WCAG AA contrast ratios across all pages
 * Dark backgrounds get white text, light backgrounds get dark text
 */

/* ==================== BODY & PAGE DEFAULTS ==================== */
body {
    background: #f7f7f7 !important; /* Light gray background */
    color: #1a1a1a !important; /* Very dark gray text - readable */
    min-height: 100vh !important; /* Ensure full viewport height */
}

/* ==================== HEADINGS ==================== */
h1, h2, h3, h4, h5, h6 {
    color: #1a1a1a !important; /* Dark text on light backgrounds */
}

/* On dark backgrounds specifically */
header h1,
header h2,
header h3,
nav h1,
nav h2,
nav h3,
.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg h6 {
    color: #ffffff !important; /* White text on dark backgrounds */
}

/* ==================== PARAGRAPHS & TEXT ==================== */
p, span, div, li, td, th, label {
    color: #2a2a2a !important; /* Default dark readable text */
}

/* On dark backgrounds */
header p,
header span,
header div,
header li,
nav p,
nav span,
nav div,
nav li,
footer p,
footer span,
.dark-bg p,
.dark-bg span,
.dark-bg div,
.dark-bg li,
#dalcart-footer-ticker,
#dalcart-footer-ticker *,
#ticker-scroll-content,
#ticker-scroll-content *,
.trust-section,
.trust-section * {
    color: #25383C !important; /* Use dark blue for footer text on light backgrounds */
}

/* ==================== MAIN CONTENT AREAS ==================== */
main {
    background: #ffffff !important; /* Pure white for content */
    color: #1a1a1a !important;
}

main p,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main span,
main div,
main li {
    color: #1a1a1a !important;
}

/* ==================== NAVIGATION ==================== */
nav {
    background: #232f3e !important; /* Dark background */
}

nav a,
.nav-link,
.cta {
    color: #ffffff !important; /* White text for visibility */
}

nav a:hover,
nav a.active,
.nav-link:hover,
.nav-link.active,
.cta:hover,
.cta:focus {
    background: #ffb300 !important; /* Bright yellow */
    color: #1a1a1a !important; /* Dark text on bright background */
}

/* ==================== HEADER ==================== */
header {
    background: #232f3e !important; /* Dark background */
    color: #ffffff !important; /* White text */
}

header * {
    color: #ffffff !important;
}

/* ==================== FOOTER ==================== */
footer {
    background: #f7f7f7 !important; /* Light background */
    color: #25383C !important; /* Dark blue text for contrast */
}

/* ==================== LINKS ==================== */
a {
    color: #0066cc !important; /* Bright blue - high contrast */
    text-decoration: underline;
        font-weight: 700 !important;
}

a:hover {
    color: #004499 !important; /* Darker blue on hover */
}

/* On dark backgrounds */
header a,
nav a,
.dark-bg a {
    color: #66b3ff !important; /* Light blue on dark */
}

header a:hover,
nav a:hover,
.dark-bg a:hover {
    color: #99ccff !important; /* Lighter blue on hover */
}

/* ==================== BUTTONS & CTAs ==================== */
button,
.btn,
input[type="submit"],
input[type="button"] {
    background: #0066cc !important; /* Blue button */
    color: #ffffff !important; /* White text */
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: #004499 !important; /* Darker blue on hover */
}

/* Secondary buttons */
.btn-secondary {
    background: #ffb300 !important; /* Yellow */
    color: #1a1a1a !important; /* Dark text */
}

.btn-secondary:hover {
    background: #ff9900 !important; /* Orange on hover */
}

/* ==================== FORMS ==================== */
input,
textarea,
select {
    background: #ffffff !important; /* White background */
    color: #1a1a1a !important; /* Dark text */
    border: 1px solid #cccccc !important;
    padding: 0.5rem;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #0066cc !important;
    outline: 2px solid rgba(0, 102, 204, 0.3);
}

label {
    color: #1a1a1a !important;
    font-weight: 600;
}

/* ==================== CARDS & CONTAINERS ==================== */
.card,
.manufacturer,
.product-card {
    background: #ffffff !important; /* White cards */
    color: #1a1a1a !important; /* Dark text */
    border: 1px solid #e0e0e0;
}

.card h3,
.manufacturer h3,
.product-card h3 {
    color: #1a1a1a !important;
}

.card p,
.manufacturer p,
.product-card p {
    color: #444444 !important; /* Medium gray for body text */
}

/* ==================== HERO SECTIONS ==================== */
.hero {
    background: #ffffff !important;
}

.hero h1,
.hero h2,
.hero p {
    color: #1a1a1a !important;
}

/* ==================== TABLES ==================== */
table {
    background: #ffffff !important;
}

th {
    background: #232f3e !important; /* Dark header */
    color: #ffffff !important; /* White text */
}

td {
    color: #1a1a1a !important;
    border-bottom: 1px solid #e0e0e0;
}

tr:hover {
    background: #f7f7f7 !important;
}

/* ==================== UTILITY CLASSES ==================== */
.dark-bg {
    background: #232f3e !important;
    color: #ffffff !important;
}

.light-bg {
    background: #f7f7f7 !important;
    color: #1a1a1a !important;
}

.high-contrast-text {
    color: #000000 !important;
}

.inverted-text {
    color: #ffffff !important;
}

/* ==================== ACCESSIBILITY ==================== */
/* Ensure focus indicators are visible */
*:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 100000;
}

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

/* ==================== SPECIFIC FIXES ==================== */
/* Manufacturer cards */
.manufacturer h3 {
    color: #232f3e !important;
}

.manufacturer a {
    background: #0066cc !important;
    color: #ffffff !important;
}

.manufacturer a:hover {
    background: #ffb300 !important;
    color: #1a1a1a !important;
}

/* Welcome section */
.welcome h1 {
    color: #1a1a1a !important;
}

.welcome p {
    color: #444444 !important;
}

/* Quick links */
.quick-links a {
    background: #ffb300 !important;
    color: #1a1a1a !important;
}

.quick-links a:hover {
    background: #0066cc !important;
    color: #ffffff !important;
}

/* ==================== MOBILE RESPONSIVE ==================== */
@media (max-width: 768px) {
    body {
        font-size: 16px; /* Minimum readable size */
    }
    
    p {
        line-height: 1.6; /* Better readability on mobile */
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    header, nav, footer {
        background: white !important;
        color: black !important;
    }
}