/*
   Safari Plug Safaris - Safari Dark Theme Overrides
   Specific enhancements for the dark theme, building upon dark-mode.css
*/

[data-theme="dark"] {
    /* Re-affirming or slightly adjusting primary colors for this specific "safari-dark" feel */
    --primary: #f0810f;       /* Safari Orange - keep strong */
    --primary-dark: #d26e06;
    --secondary: #4CAF50;     /* A slightly more vibrant green */
    --secondary-dark: #388E3C;
    --accent: #FFC107;         /* A brighter gold/yellow accent */

    /* Backgrounds for a layered dark look */
    --bg-primary: #101010;     /* Deep, almost black */
    --bg-secondary: #181818;   /* Slightly lighter for sections */
    --card-bg: #202020;        /* Cards and distinct elements */
    --header-bg: #0D0D0D;      /* Header even darker */

    /* Text colors */
    --text-primary: #f1f1f1;   /* Main text - very light gray */
    --text-secondary: #a0a0a0; /* Secondary text - muted */

    --border-color: #2f2f2f;   /* Subtle borders */

    /* Specific "Safari Dark" theme elements */
    --safari-highlight-text: var(--accent); /* Gold for special text highlights */
    --hero-overlay-color: rgba(5, 5, 5, 0.7); /* Darker hero overlay */
    --cta-bg-color: var(--secondary); /* Green for CTA background */
}

/* Header Enhancements for Safari Dark */
[data-theme="dark"] header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Very subtle border */
}
[data-theme="dark"] .logo .company-name { /* From logo-fix.css, ensure it's still green */
    /* color: var(--secondary) !important; */ /* Let logo-fix.css handle this */
}
[data-theme="dark"] .logo .highlight { /* From logo-fix.css, ensure it's orange */
    /* color: var(--primary) !important; */
}


/* Button Overrides for Safari Dark Feel */
[data-theme="dark"] .btn-primary {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    /* Text color is var(--white) which becomes #121212. Let's ensure it's light. */
    color: #f1f1f1;
}
[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    color: #ffffff;
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff; /* Explicitly white */
}
[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
    color: #ffffff;
}

/* Cards in Safari Dark */
[data-theme="dark"] .package-card,
[data-theme="dark"] .destination-card,
[data-theme="dark"] .testimonial,
[data-theme="dark"] .mission-card,
[data-theme="dark"] .vision-card {
    border: 1px solid var(--border-color);
    box-shadow: 0 3px 8px rgba(0,0,0,0.5); /* Deeper shadow for cards */
}

/* Section Headings in Safari Dark */
[data-theme="dark"] .section-heading h2 {
    color: var(--text-primary);
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.2); */ /* Optional subtle shadow */
}
[data-theme="dark"] .separator {
    background-color: var(--accent); /* Gold separator */
}

/* Hero Section in Safari Dark */
[data-theme="dark"] .hero::before {
    background-color: var(--hero-overlay-color);
}
[data-theme="dark"] .hero h1 {
    color: #fff; /* Pure white for hero title */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8); /* Stronger shadow */
}
[data-theme="dark"] .hero p {
    color: #e0e0e0; /* Slightly off-white for hero subtitle */
}

/* CTA Section in Safari Dark */
[data-theme="dark"] .cta {
    background-color: var(--cta-bg-color); /* Solid green background */
    background-image: none; /* Remove image for solid color CTA */
    padding: 70px 0;
}
[data-theme="dark"] .cta h2, [data-theme="dark"] .cta p {
    color: #ffffff; /* White text on green */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
[data-theme="dark"] .cta .btn-light {
    background-color: rgba(255,255,255,0.9); /* Slightly transparent white button */
    color: var(--secondary-dark); /* Dark green text on button */
    border-color: transparent;
}
[data-theme="dark"] .cta .btn-light:hover {
    background-color: #ffffff;
    color: var(--secondary);
}


/* Footer in Safari Dark */
[data-theme="dark"] footer {
    background-color: #080808; /* Even darker footer */
    border-top: 1px solid #1f1f1f;
}
[data-theme="dark"] .footer-about h3::after,
[data-theme="dark"] .footer-links h3::after,
[data-theme="dark"] .footer-contact h3::after,
[data-theme="dark"] .footer-newsletter h3::after {
    background-color: var(--accent); /* Gold for footer heading underlines */
}
[data-theme="dark"] .social-links a {
    background-color: #222; /* Darker social link bg */
}
[data-theme="dark"] .social-links a:hover {
    background-color: var(--accent);
    color: #111;
}

/* Text highlight with accent color */
[data-theme="dark"] .text-highlight { /* Overrides general enhancement.css for this theme */
    color: var(--safari-highlight-text);
    background-color: rgba(255, 193, 7, 0.15); /* Accent color with low opacity bg */
}

/* Price color in dark mode */
[data-theme="dark"] .price {
    color: var(--accent); /* Gold for prices */
    font-weight: 700;
}

/* Ensure contact info block uses the specific dark orange from dark-mode.css */
[data-theme="dark"] .contact-info {
    background-color: var(--contact-info-bg); /* Uses the var from dark-mode.css */
}
[data-theme="dark"] .contact-info h3,
[data-theme="dark"] .contact-info p,
[data-theme="dark"] .contact-info a {
    color: var(--contact-info-text) !important;
}