/* Style Changer Button */
.style-changer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.style-changer:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Mobile styles for style changer button */
@media (max-width: 768px) {
    .style-changer {
        position: static;
        padding: 8px 12px;
        font-size: 0.75rem;
        border-radius: 20px;
        margin: 10px auto;
        display: block;
        width: fit-content;
    }
    
    /* Ensure mobile menu toggle is visible */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        cursor: pointer;
        padding: 0.5rem;
        order: 3; /* Put burger menu after style button */
    }
    
    /* Hide desktop nav on mobile */
    .nav-links {
        display: none !important;
    }
    
    /* Mobile header layout - ensure proper stacking */
    .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        position: relative;
    }
    
    /* Logo styling for mobile */
    .logo {
        order: 1;
        font-size: 1.8rem;
        margin-bottom: 5px;
        text-align: center;
    }
    
    /* Style button positioning */
    .style-changer {
        order: 2;
        margin: 5px auto;
        z-index: 10;
    }
    
    /* Burger menu positioning */
    .mobile-menu-toggle {
        order: 3;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 20;
    }
    
    /* Ensure nav is hidden on mobile */
    nav {
        display: none !important;
    }
}

/* Style 1: NHS Blue */
.style-1 .logo,
.style-1 .content-section h2,
.style-1 .story-title,
.style-1 .updates-header h2 {
    color: #005eb8 !important;
}

.style-1 .air-quality-link,
.style-1 .social-link {
    background: linear-gradient(135deg, #005eb8, #41b6e6) !important;
}

.style-1 .feature-card,
.style-1 .update-card {
    background: #f0f8ff !important;
}

.style-1 .story-content {
    background: #f0f8ff !important;
}

.style-1 .main-content {
    background: #ffffff !important;
}

.style-1 .contact-section {
    background: #ffffff !important;
}

.style-1 .story-section {
    background: #ffffff !important;
}

.style-1 .updates-section {
    background: linear-gradient(135deg, #ffffff, #f0f8ff) !important;
}

.style-1 .highlight-text {
    background: linear-gradient(135deg, #005eb8, #41b6e6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.style-1 .contact-email {
    color: #005eb8 !important;
}

.style-1 .update-date {
    color: #005eb8 !important;
}

.style-1 .update-content h3 {
    color: #231f20 !important;
}

.style-1 .update-content p {
    color: #231f20 !important;
}

.style-1 .story-paragraph {
    color: #231f20 !important;
}

.style-1 .story-paragraph:first-child {
    color: #005eb8 !important;
}

.style-1 .story-paragraph:last-child {
    color: #005eb8 !important;
}

/* Style 2: Medical Green */
.style-2 .logo,
.style-2 .content-section h2,
.style-2 .story-title,
.style-2 .updates-header h2 {
    color: #2e7d32 !important;
}

.style-2 .air-quality-link,
.style-2 .social-link {
    background: linear-gradient(135deg, #2e7d32, #4caf50) !important;
}

.style-2 .feature-card,
.style-2 .update-card {
    background: #e8f5e8 !important;
}

.style-2 .story-content {
    background: #e8f5e8 !important;
}

.style-2 .main-content {
    background: #f1f8e9 !important;
}

.style-2 .contact-section {
    background: #f1f8e9 !important;
}

.style-2 .story-section {
    background: #f1f8e9 !important;
}

.style-2 .updates-section {
    background: linear-gradient(135deg, #f1f8e9, #e8f5e8) !important;
}

.style-2 .highlight-text {
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.style-2 .contact-email {
    color: #2e7d32 !important;
}

.style-2 .update-date {
    color: #2e7d32 !important;
}

.style-2 .update-content h3 {
    color: #1b5e20 !important;
}

.style-2 .update-content p {
    color: #1b5e20 !important;
}

.style-2 .story-paragraph {
    color: #1b5e20 !important;
}

.style-2 .story-paragraph:first-child {
    color: #2e7d32 !important;
}

.style-2 .story-paragraph:last-child {
    color: #2e7d32 !important;
}

/* Style 3: Healthcare Purple */
.style-3 .logo,
.style-3 .content-section h2,
.style-3 .story-title,
.style-3 .updates-header h2 {
    color: #7b1fa2 !important;
}

.style-3 .air-quality-link,
.style-3 .social-link {
    background: linear-gradient(135deg, #7b1fa2, #9c27b0) !important;
}

.style-3 .feature-card,
.style-3 .update-card {
    background: #f3e5f5 !important;
}

.style-3 .story-content {
    background: #f3e5f5 !important;
}

.style-3 .main-content {
    background: #fce4ec !important;
}

.style-3 .contact-section {
    background: #fce4ec !important;
}

.style-3 .story-section {
    background: #fce4ec !important;
}

.style-3 .updates-section {
    background: linear-gradient(135deg, #fce4ec, #f3e5f5) !important;
}

.style-3 .highlight-text {
    background: linear-gradient(135deg, #7b1fa2, #9c27b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.style-3 .contact-email {
    color: #7b1fa2 !important;
}

.style-3 .update-date {
    color: #7b1fa2 !important;
}

.style-3 .update-content h3 {
    color: #4a148c !important;
}

.style-3 .update-content p {
    color: #4a148c !important;
}

.style-3 .story-paragraph {
    color: #4a148c !important;
}

.style-3 .story-paragraph:first-child {
    color: #7b1fa2 !important;
}

.style-3 .story-paragraph:last-child {
    color: #7b1fa2 !important;
}

/* Style 4: Medical Orange */
.style-4 .logo,
.style-4 .content-section h2,
.style-4 .story-title,
.style-4 .updates-header h2 {
    color: #f57c00 !important;
}

.style-4 .air-quality-link,
.style-4 .social-link {
    background: linear-gradient(135deg, #f57c00, #ff9800) !important;
}

.style-4 .feature-card,
.style-4 .update-card {
    background: #ffe0b2 !important;
}

.style-4 .story-content {
    background: #ffe0b2 !important;
}

.style-4 .main-content {
    background: #fff3e0 !important;
}

.style-4 .contact-section {
    background: #fff3e0 !important;
}

.style-4 .story-section {
    background: #fff3e0 !important;
}

.style-4 .updates-section {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2) !important;
}

.style-4 .highlight-text {
    background: linear-gradient(135deg, #f57c00, #ff9800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.style-4 .contact-email {
    color: #f57c00 !important;
}

.style-4 .update-date {
    color: #f57c00 !important;
}

.style-4 .update-content h3 {
    color: #e65100 !important;
}

.style-4 .update-content p {
    color: #e65100 !important;
}

.style-4 .story-paragraph {
    color: #e65100 !important;
}

.style-4 .story-paragraph:first-child {
    color: #f57c00 !important;
}

.style-4 .story-paragraph:last-child {
    color: #f57c00 !important;
}

/* Style 5: Healthcare Teal */
.style-5 .logo,
.style-5 .content-section h2,
.style-5 .story-title,
.style-5 .updates-header h2 {
    color: #00695c !important;
}

.style-5 .air-quality-link,
.style-5 .social-link {
    background: linear-gradient(135deg, #00695c, #00897b) !important;
}

.style-5 .feature-card,
.style-5 .update-card {
    background: #b2dfdb !important;
}

.style-5 .story-content {
    background: #b2dfdb !important;
}

.style-5 .main-content {
    background: #e0f2f1 !important;
}

.style-5 .contact-section {
    background: #e0f2f1 !important;
}

.style-5 .story-section {
    background: #e0f2f1 !important;
}

.style-5 .updates-section {
    background: linear-gradient(135deg, #e0f2f1, #b2dfdb) !important;
}

.style-5 .highlight-text {
    background: linear-gradient(135deg, #00695c, #00897b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.style-5 .contact-email {
    color: #00695c !important;
}

.style-5 .update-date {
    color: #00695c !important;
}

.style-5 .update-content h3 {
    color: #004d40 !important;
}

.style-5 .update-content p {
    color: #004d40 !important;
}

.style-5 .story-paragraph {
    color: #004d40 !important;
}

.style-5 .story-paragraph:first-child {
    color: #00695c !important;
}

.style-5 .story-paragraph:last-child {
    color: #00695c !important;
}

/* Style 6: Medical Red */
.style-6 .logo,
.style-6 .content-section h2,
.style-6 .story-title,
.style-6 .updates-header h2 {
    color: #c62828 !important;
}

.style-6 .air-quality-link,
.style-6 .social-link {
    background: linear-gradient(135deg, #c62828, #f44336) !important;
}

.style-6 .feature-card,
.style-6 .update-card {
    background: #ffcdd2 !important;
}

.style-6 .story-content {
    background: #ffcdd2 !important;
}

.style-6 .main-content {
    background: #ffebee !important;
}

.style-6 .contact-section {
    background: #ffebee !important;
}

.style-6 .story-section {
    background: #ffebee !important;
}

.style-6 .updates-section {
    background: linear-gradient(135deg, #ffebee, #ffcdd2) !important;
}

.style-6 .highlight-text {
    background: linear-gradient(135deg, #c62828, #f44336);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.style-6 .contact-email {
    color: #c62828 !important;
}

.style-6 .update-date {
    color: #c62828 !important;
}

.style-6 .update-content h3 {
    color: #b71c1c !important;
}

.style-6 .update-content p {
    color: #b71c1c !important;
}

.style-6 .story-paragraph {
    color: #b71c1c !important;
}

.style-6 .story-paragraph:first-child {
    color: #c62828 !important;
}

.style-6 .story-paragraph:last-child {
    color: #c62828 !important;
}

/* Style 7: Healthcare Navy */
.style-7 .logo,
.style-7 .content-section h2,
.style-7 .story-title,
.style-7 .updates-header h2 {
    color: #1a237e !important;
}

.style-7 .air-quality-link,
.style-7 .social-link {
    background: linear-gradient(135deg, #1a237e, #3f51b5) !important;
}

.style-7 .feature-card,
.style-7 .update-card {
    background: #c5cae9 !important;
}

.style-7 .story-content {
    background: #c5cae9 !important;
}

.style-7 .main-content {
    background: #e8eaf6 !important;
}

.style-7 .contact-section {
    background: #e8eaf6 !important;
}

.style-7 .story-section {
    background: #e8eaf6 !important;
}

.style-7 .updates-section {
    background: linear-gradient(135deg, #e8eaf6, #c5cae9) !important;
}

.style-7 .highlight-text {
    background: linear-gradient(135deg, #1a237e, #3f51b5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.style-7 .contact-email {
    color: #1a237e !important;
}

.style-7 .update-date {
    color: #1a237e !important;
}

.style-7 .update-content h3 {
    color: #0d47a1 !important;
}

.style-7 .update-content p {
    color: #0d47a1 !important;
}

.style-7 .story-paragraph {
    color: #0d47a1 !important;
}

.style-7 .story-paragraph:first-child {
    color: #1a237e !important;
}

.style-7 .story-paragraph:last-child {
    color: #1a237e !important;
}

/* Style 8: Medical Pink */
.style-8 .logo,
.style-8 .content-section h2,
.style-8 .story-title,
.style-8 .updates-header h2 {
    color: #ad1457 !important;
}

.style-8 .air-quality-link,
.style-8 .social-link {
    background: linear-gradient(135deg, #ad1457, #e91e63) !important;
}

.style-8 .feature-card,
.style-8 .update-card {
    background: #f8bbd9 !important;
}

.style-8 .story-content {
    background: #f8bbd9 !important;
}

.style-8 .main-content {
    background: #fce4ec !important;
}

.style-8 .contact-section {
    background: #fce4ec !important;
}

.style-8 .story-section {
    background: #fce4ec !important;
}

.style-8 .updates-section {
    background: linear-gradient(135deg, #fce4ec, #f8bbd9) !important;
}

.style-8 .highlight-text {
    background: linear-gradient(135deg, #ad1457, #e91e63);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.style-8 .contact-email {
    color: #ad1457 !important;
}

.style-8 .update-date {
    color: #ad1457 !important;
}

.style-8 .update-content h3 {
    color: #880e4f !important;
}

.style-8 .update-content p {
    color: #880e4f !important;
}

.style-8 .story-paragraph {
    color: #880e4f !important;
}

.style-8 .story-paragraph:first-child {
    color: #ad1457 !important;
}

.style-8 .story-paragraph:last-child {
    color: #ad1457 !important;
}

/* Style 9: Healthcare Indigo */
.style-9 .logo,
.style-9 .content-section h2,
.style-9 .story-title,
.style-9 .updates-header h2 {
    color: #283593 !important;
}

.style-9 .air-quality-link,
.style-9 .social-link {
    background: linear-gradient(135deg, #283593, #5c6bc0) !important;
}

.style-9 .feature-card,
.style-9 .update-card {
    background: #c5cae9 !important;
}

.style-9 .story-content {
    background: #c5cae9 !important;
}

.style-9 .main-content {
    background: #e8eaf6 !important;
}

.style-9 .contact-section {
    background: #e8eaf6 !important;
}

.style-9 .story-section {
    background: #e8eaf6 !important;
}

.style-9 .updates-section {
    background: linear-gradient(135deg, #e8eaf6, #c5cae9) !important;
}

.style-9 .highlight-text {
    background: linear-gradient(135deg, #283593, #5c6bc0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.style-9 .contact-email {
    color: #283593 !important;
}

.style-9 .update-date {
    color: #283593 !important;
}

.style-9 .update-content h3 {
    color: #1a237e !important;
}

.style-9 .update-content p {
    color: #1a237e !important;
}

.style-9 .story-paragraph {
    color: #1a237e !important;
}

.style-9 .story-paragraph:first-child {
    color: #283593 !important;
}

.style-9 .story-paragraph:last-child {
    color: #283593 !important;
}

/* Style 10: Medical Brown */
.style-10 .logo,
.style-10 .content-section h2,
.style-10 .story-title,
.style-10 .updates-header h2 {
    color: #5d4037 !important;
}

.style-10 .air-quality-link,
.style-10 .social-link {
    background: linear-gradient(135deg, #5d4037, #8d6e63) !important;
}

.style-10 .feature-card,
.style-10 .update-card {
    background: #d7ccc8 !important;
}

.style-10 .story-content {
    background: #d7ccc8 !important;
}

.style-10 .main-content {
    background: #efebe9 !important;
}

.style-10 .contact-section {
    background: #efebe9 !important;
}

.style-10 .story-section {
    background: #efebe9 !important;
}

.style-10 .updates-section {
    background: linear-gradient(135deg, #efebe9, #d7ccc8) !important;
}

.style-10 .highlight-text {
    background: linear-gradient(135deg, #5d4037, #8d6e63);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.style-10 .contact-email {
    color: #5d4037 !important;
}

.style-10 .update-date {
    color: #5d4037 !important;
}

.style-10 .update-content h3 {
    color: #3e2723 !important;
}

.style-10 .update-content p {
    color: #3e2723 !important;
}

.style-10 .story-paragraph {
    color: #3e2723 !important;
}

.style-10 .story-paragraph:first-child {
    color: #5d4037 !important;
}

.style-10 .story-paragraph:last-child {
    color: #5d4037 !important;
}

/* Hide background image when styles are applied */
.style-1 body::before,
.style-2 body::before,
.style-3 body::before,
.style-4 body::before,
.style-5 body::before,
.style-6 body::before,
.style-7 body::before,
.style-8 body::before,
.style-9 body::before,
.style-10 body::before {
    display: none !important;
}

/* Override body background for styled versions */
.style-1 body,
.style-2 body,
.style-3 body,
.style-4 body,
.style-5 body,
.style-6 body,
.style-7 body,
.style-8 body,
.style-9 body,
.style-10 body {
    background: #ffffff !important;
    background-attachment: initial !important;
}

/* Additional specificity for pages with inline styles */
body.style-1,
body.style-2,
body.style-3,
body.style-4,
body.style-5,
body.style-6,
body.style-7,
body.style-8,
body.style-9,
body.style-10 {
    background: #ffffff !important;
    background-attachment: initial !important;
}

/* Fix header transparency for styled versions */
.style-1 header,
.style-2 header,
.style-3 header,
.style-4 header,
.style-5 header,
.style-6 header,
.style-7 header,
.style-8 header,
.style-9 header,
.style-10 header {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: none !important;
}

/* Additional specificity for about page header */
body.style-1 header,
body.style-2 header,
body.style-3 header,
body.style-4 header,
body.style-5 header,
body.style-6 header,
body.style-7 header,
body.style-8 header,
body.style-9 header,
body.style-10 header {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: none !important;
}

/* Fix hero section for styled versions */
.style-1 .hero {
    background: linear-gradient(135deg, #005eb8, #41b6e6) !important;
    color: white !important;
}

.style-2 .hero {
    background: linear-gradient(135deg, #2e7d32, #4caf50) !important;
    color: white !important;
}

.style-3 .hero {
    background: linear-gradient(135deg, #7b1fa2, #9c27b0) !important;
    color: white !important;
}

.style-4 .hero {
    background: linear-gradient(135deg, #f57c00, #ff9800) !important;
    color: white !important;
}

.style-5 .hero {
    background: linear-gradient(135deg, #00695c, #00897b) !important;
    color: white !important;
}

.style-6 .hero {
    background: linear-gradient(135deg, #c62828, #f44336) !important;
    color: white !important;
}

.style-7 .hero {
    background: linear-gradient(135deg, #1a237e, #3f51b5) !important;
    color: white !important;
}

.style-8 .hero {
    background: linear-gradient(135deg, #ad1457, #e91e63) !important;
    color: white !important;
}

.style-9 .hero {
    background: linear-gradient(135deg, #283593, #5c6bc0) !important;
    color: white !important;
}

.style-10 .hero {
    background: linear-gradient(135deg, #5d4037, #8d6e63) !important;
    color: white !important;
}

/* About page specific sections - use the same background colors as defined in each style */
.style-1 .main-content,
.style-1 .story-section,
.style-1 .updates-section,
.style-1 .contact-section {
    background: #ffffff !important;
}

.style-2 .main-content,
.style-2 .story-section,
.style-2 .updates-section,
.style-2 .contact-section {
    background: #f1f8e9 !important;
}

.style-3 .main-content,
.style-3 .story-section,
.style-3 .updates-section,
.style-3 .contact-section {
    background: #fce4ec !important;
}

.style-4 .main-content,
.style-4 .story-section,
.style-4 .updates-section,
.style-4 .contact-section {
    background: #fff3e0 !important;
}

.style-5 .main-content,
.style-5 .story-section,
.style-5 .updates-section,
.style-5 .contact-section {
    background: #e0f2f1 !important;
}

.style-6 .main-content,
.style-6 .story-section,
.style-6 .updates-section,
.style-6 .contact-section {
    background: #ffebee !important;
}

.style-7 .main-content,
.style-7 .story-section,
.style-7 .updates-section,
.style-7 .contact-section {
    background: #e8eaf6 !important;
}

.style-8 .main-content,
.style-8 .story-section,
.style-8 .updates-section,
.style-8 .contact-section {
    background: #fce4ec !important;
}

.style-9 .main-content,
.style-9 .story-section,
.style-9 .updates-section,
.style-9 .contact-section {
    background: #e8eaf6 !important;
}

.style-10 .main-content,
.style-10 .story-section,
.style-10 .updates-section,
.style-10 .contact-section {
    background: #efebe9 !important;
}