/* ========== COMPREHENSIVE GLOBAL COLOUR SYSTEM FOR MILLIONS OF USERS ========== */
/* ========== UNIVERSAL CONTRAST GOVERNING RULES ========== */

/* ========== STRIPE CHECKOUT OVERRIDES ========== */
/* Exclude Stripe elements from global colour rules */
#stripe-checkout-container *,
#stripe-checkout-container,
[data-testid*="stripe"] *,
[data-testid*="stripe"],
.stripe-checkout *,
.stripe-checkout,
#checkout *,
#checkout,
div[id*="checkout"] *,
div[id*="checkout"] {
    color: inherit !important;
    background-color: inherit !important;
}

/* Specific fix for Stripe payment modal headers and content */
#stripe-checkout-modal *,
#stripe-checkout-modal,
#stripe-checkout-modal .modal-title,
#stripe-checkout-modal .modal-header,
#stripe-checkout-modal h5,
#stripe-checkout-container h1,
#stripe-checkout-container h2,
#stripe-checkout-container h3,
#stripe-checkout-container h4,
#stripe-checkout-container h5,
#stripe-checkout-container h6,
[data-testid*="stripe"] h1,
[data-testid*="stripe"] h2,
[data-testid*="stripe"] h3,
[data-testid*="stripe"] h4,
[data-testid*="stripe"] h5,
[data-testid*="stripe"] h6 {
    color: #1f2937 !important;
}

/* Force dark text for payment modal title specifically */
.modal-title,
h5.modal-title {
    color: #1f2937 !important;
}

/* PRIMARY COLOUR VARIABLES - Only 4 colours as requested */
:root {
    --primary-blue: #2563eb;      /* Deep Professional Blue */
    --vibrant-purple: #7c3aed;    /* Vibrant Purple */
    --success-green: #059669;     /* Success Green */
    --neutral-dark: #1f2937;      /* Neutral Dark */
    
    /* Supporting colours */
    --white: #ffffff;
    --light-grey: #f8fafc;
    --warning-orange: #ea580c;    /* Only for alerts */
    --gold: #f59e0b;             /* Gold for UI elements */
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue), var(--vibrant-purple));
    --gradient-secondary: linear-gradient(135deg, var(--vibrant-purple), var(--success-green));
    
    /* Text colours */
    --text-primary: var(--neutral-dark);
    --text-secondary: #6b7280;
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --border-radius: 12px;
    --border-radius-lg: 20px;
}

/* ========== UNIVERSAL CONTRAST GOVERNING RULES ========== */
/* Rule 1: White text requires dark/coloured background */
/* Rule 2: Blue/dark background requires white/light text */
/* Rule 3: White background requires dark text */

/* GOVERNING RULE: Elements with white backgrounds get dark text */
*[style*="background: white"],
*[style*="background-color: white"],
*[style*="background: #ffffff"],
*[style*="background-color: #ffffff"],
.bg-white,
.card,
.stat-card,
.container[style*="background: white"] {
    color: var(--text-primary) !important;
}

/* ALL content inside white containers MUST be dark */
.bg-white *:not(.btn):not(.badge),
.card *:not(.btn):not(.badge):not(.hero-section *),
.stat-card,
.stat-card *,
.stat-card h3,
.stat-card p,
.stats-grid .stat-card,
.stats-grid .stat-card *,
*[style*="background: white"] *:not(.btn):not(.badge),
div[style*="background: white"] *:not(.btn):not(.badge) {
    color: #1f2937 !important;
}

/* EMERGENCY OVERRIDE: Force stat card text to be visible with green background */
.stat-card p,
.stat-card p.mb-0,
.stats-grid .stat-card p,
.stats-grid .stat-card p.mb-0,
div.stat-card p,
.dashboard .stat-card p {
    color: #ffffff !important;
    background: rgba(34, 197, 94, 0.9) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.9rem !important;
    z-index: 100 !important;
    position: relative !important;
    margin-top: 8px !important;
}

/* UNIVERSAL TEXT VISIBILITY SYSTEM - ONLY FOR PROBLEM AREAS */
/* Apply coloured backgrounds ONLY to areas that actually have visibility issues */
/* EXEMPTIONS: All sections that were already working perfectly */
.dashboard p:not([style*="background"]):not(.btn):not(.badge):not(.stat-card *),
.content-area p:not([style*="background"]):not(.btn):not(.badge),
.main-content p:not([style*="background"]):not(.btn):not(.badge) {
    background: rgba(34, 197, 94, 0.8) !important;
    color: white !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
    display: inline-block !important;
    margin: 2px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Invisible headings get blue backgrounds - ONLY FOR PROBLEM AREAS */
.dashboard h1:not([style*="background"]):not(.btn):not(.badge):not(.stat-card *),
.dashboard h2:not([style*="background"]):not(.btn):not(.badge):not(.stat-card *),
.dashboard h3:not([style*="background"]):not(.btn):not(.badge):not(.stat-card *),
.dashboard h4:not([style*="background"]):not(.btn):not(.badge):not(.stat-card *),
.dashboard h5:not([style*="background"]):not(.btn):not(.badge):not(.stat-card *),
.dashboard h6:not([style*="background"]):not(.btn):not(.badge):not(.stat-card *) {
    background: rgba(37, 99, 235, 0.8) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    display: inline-block !important;
    margin: 4px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Invisible links get purple backgrounds - ONLY FOR PROBLEM AREAS */
.dashboard a:not([style*="background"]):not(.btn):not(.badge):not(.stat-card *) {
    background: rgba(124, 58, 237, 0.8) !important;
    color: white !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    display: inline !important;
    position: relative !important;
    z-index: 10 !important;
}

/* EXCEPTION: Footer with bg-dark class is exempt from white background rules */
footer.bg-dark,
footer.bg-dark * {
    color: white !important;
}

/* BLOG PAGE SPECIFIC STYLING - High contrast text on white backgrounds */
.blog-page,
.blog-page * {
    color: #000000 !important;
}

.blog-page h1,
.blog-page h2,
.blog-page h3,
.blog-page h4,
.blog-page h5,
.blog-page h6 {
    color: #000000 !important;
    font-weight: 700 !important;
}

.blog-page p,
.blog-page li,
.blog-page span,
.blog-page div {
    color: #333333 !important;
}

.blog-page .text-muted,
.blog-page .text-secondary {
    color: #666666 !important;
}

/* Blog content area with white background needs dark text */
.blog-content,
.blog-post,
.blog-header,
.container.blog,
div[class*="blog"],
.container[style*="background: white"],
body.blog-page .container[style*="background: white"] * {
    background: white !important;
    color: #000000 !important;
}

/* EMERGENCY FIX: WHITE BLOG CONTAINER - Give blue background to reveal hidden text */
.container[style*="background: white"],
body.blog-page .container[style*="background: white"] {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 3rem 2rem !important;
    border-radius: 15px !important;
}

.container[style*="background: white"] *,
body.blog-page .container[style*="background: white"] * {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force headings to be white and bold on blue background */
.container[style*="background: white"] h1,
.container[style*="background: white"] h2,
.container[style*="background: white"] h3,
.container[style*="background: white"] h4,
.container[style*="background: white"] h5,
.container[style*="background: white"] h6,
body.blog-page .container[style*="background: white"] h1,
body.blog-page .container[style*="background: white"] h2,
body.blog-page .container[style*="background: white"] h3,
body.blog-page .container[style*="background: white"] h4,
body.blog-page .container[style*="background: white"] h5,
body.blog-page .container[style*="background: white"] h6 {
    color: white !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 1rem !important;
}

/* Force all paragraphs and text to be white on blue background */
.container[style*="background: white"] p,
.container[style*="background: white"] .card-text,
.container[style*="background: white"] .text-muted,
.container[style*="background: white"] .lead,
.container[style*="background: white"] .card-title,
.container[style*="background: white"] .badge,
body.blog-page .container[style*="background: white"] p,
body.blog-page .container[style*="background: white"] .card-text,
body.blog-page .container[style*="background: white"] .text-muted,
body.blog-page .container[style*="background: white"] .lead,
body.blog-page .container[style*="background: white"] .card-title {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
}

/* Add professional styling for cards within the blog container */
.container[style*="background: white"] .card,
body.blog-page .container[style*="background: white"] .card {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    backdrop-filter: blur(10px) !important;
}

/* Category cards outside the white container need proper styling */
body.blog-page .card.bg-light,
body.blog-page .bg-light .card,
.blog-page .card.bg-light,
.blog-page .bg-light .card {
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    color: #1f2937 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    width: 100% !important;
}

/* Ensure category cards display horizontally on larger screens */
@media (min-width: 768px) {
    body.blog-page .col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        display: inline-block !important;
        float: left !important;
    }
    
    body.blog-page .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}

body.blog-page .card.bg-light:hover,
body.blog-page .bg-light .card:hover,
.blog-page .card.bg-light:hover,
.blog-page .bg-light .card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    border-color: #2563eb !important;
}

/* Ensure card text is white on blue gradient cards */
.container[style*="background: white"] .card h2,
.container[style*="background: white"] .card h3,
.container[style*="background: white"] .card h4,
.container[style*="background: white"] .card h5,
.container[style*="background: white"] .card-title,
body.blog-page .container[style*="background: white"] .card h2,
body.blog-page .container[style*="background: white"] .card h3,
body.blog-page .container[style*="background: white"] .card h4,
body.blog-page .container[style*="background: white"] .card h5,
body.blog-page .container[style*="background: white"] .card-title {
    color: white !important;
}

.container[style*="background: white"] .card p,
.container[style*="background: white"] .card .card-text,
body.blog-page .container[style*="background: white"] .card p,
body.blog-page .container[style*="background: white"] .card .card-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Category cards styling - FORCE BLACK TEXT */
body.blog-page .card.bg-light h5,
body.blog-page .card.bg-light .card-title,
body.blog-page .bg-light .card h5,
body.blog-page .bg-light .card .card-title,
.blog-page .card.bg-light h5,
.blog-page .card.bg-light .card-title,
.blog-page .bg-light .card h5,
.blog-page .bg-light .card .card-title,
body.blog-page .card h5,
body.blog-page .card .card-title,
.blog-page .card h5,
.blog-page .card .card-title {
    color: #000000 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body.blog-page .card.bg-light p,
body.blog-page .card.bg-light .card-text,
body.blog-page .bg-light .card p,
body.blog-page .bg-light .card .card-text,
.blog-page .card.bg-light p,
.blog-page .card.bg-light .card-text,
.blog-page .bg-light .card p,
.blog-page .bg-light .card .card-text,
body.blog-page .card p,
body.blog-page .card .card-text,
.blog-page .card p,
.blog-page .card .card-text {
    color: #333333 !important;
    text-shadow: none !important;
}

/* Icons in category cards - BLUE COLOUR FOR VISIBILITY */
body.blog-page .card.bg-light .fas,
body.blog-page .bg-light .card .fas,
.blog-page .card.bg-light .fas,
.blog-page .bg-light .card .fas,
body.blog-page .card .fas,
.blog-page .card .fas {
    color: #2563eb !important;
    filter: none !important;
}

/* EMERGENCY FIX - Force all card text to be black */
body.blog-page .card *,
.blog-page .card *,
body.blog-page .bg-light *,
.blog-page .bg-light * {
    color: #000000 !important;
}

/* Keep icons blue */
body.blog-page .card .fas,
.blog-page .card .fas,
body.blog-page .bg-light .fas,
.blog-page .bg-light .fas {
    color: #2563eb !important;
}

/* Style buttons within the blog container */
.container[style*="background: white"] .btn-primary,
body.blog-page .container[style*="background: white"] .btn-primary {
    background: #2563eb !important;
    border: 1px solid #2563eb !important;
    color: white !important;
    font-weight: 600 !important;
}

.container[style*="background: white"] .btn-primary:hover,
body.blog-page .container[style*="background: white"] .btn-primary:hover {
    background: #1d4ed8 !important;
    border: 1px solid #1d4ed8 !important;
    transform: translateY(-2px) !important;
}

/* GOVERNING RULE: Elements with blue/dark backgrounds get white text */
*[style*="background: linear-gradient"],
*[style*="background: #2563eb"],
*[style*="background: #7c3aed"],
.bg-primary,
.bg-gradient,
.bg-dark,
.hero-section {
    color: white !important;
}

/* FOOTER: Dark background requires white text - EXEMPT FROM WHITE BACKGROUND RULES */
footer.bg-dark,
footer.bg-dark *,
footer.bg-dark p,
footer.bg-dark small,
footer.bg-dark a,
footer.bg-dark .text-white {
    color: white !important;
    background-color: var(--neutral-dark) !important;
}

footer.bg-dark a:hover {
    color: var(--light-grey) !important;
}

/* GOVERNING RULE: All icons follow background contrast rules */
.bg-white .fas,
.card .fas:not(.decorative-icon) {
    color: var(--text-primary) !important;
}

*[style*="background: linear-gradient"] .fas,
.bg-primary .fas,
.bg-gradient .fas,
.bg-dark .fas,
.hero-section .fas {
    color: white !important;
}

/* HERO SECTION: Fix faded capital letters on purple gradient background */
.hero-section .feature-card h2,
.hero-section .feature-card .display-1,
.hero-section .feature-card .large-text,
.hero-section .card h2,
.hero-section .card .display-1,
.hero-section .card .large-text {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

/* Target the specific feature cards in hero section */
.hero-section .row .col-md-3 .card,
.hero-section .row .col-lg-3 .card,
.hero-section .feature-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.hero-section .row .col-md-3 .card *,
.hero-section .row .col-lg-3 .card *,
.hero-section .feature-card * {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* Override any faded text in hero section */
.hero-section [style*="opacity"],
.hero-section .text-muted,
.hero-section .text-secondary {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* CRITICAL OVERRIDE: Hero section cards must have attractive coloured text */
.hero-section .card *,
.hero-section .card-body *,
.hero-section .card-header *,
.hero-section div[class*="card"] *,
.hero-section [class*="card"] *,
.hero-section .feature-card *,
.hero-section .row .col-md-3 *,
.hero-section .row .col-lg-3 * {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(37, 99, 235, 0.6) !important;
    font-weight: 700 !important;
}

/* Target the actual counter-up divs - override gradient background clipping */
.hero-section .col-6.col-md-3:nth-child(1) .counter-up {
    color: #374151 !important; /* Dark grey for AI */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #374151 !important;
    background-clip: initial !important;
}

.hero-section .col-6.col-md-3:nth-child(2) .counter-up {
    color: #f59e0b !important; /* Gold for ATS */
    text-shadow: 2px 2px 4px rgba(245, 158, 11, 0.4) !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #f59e0b !important;
    background-clip: initial !important;
}

.hero-section .col-6.col-md-3:nth-child(3) .counter-up {
    color: #1e40af !important; /* Darker trustworthy blue for UK */
    text-shadow: 2px 2px 4px rgba(30, 64, 175, 0.4) !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #1e40af !important;
    background-clip: initial !important;
}

.hero-section .col-6.col-md-3:nth-child(4) .counter-up {
    color: #ffffff !important; /* Solid white for Pro */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: initial !important;
}

/* ========== BLOG PAGES: White background with dark text ========== */
body.blog-page {
    background-color: #ffffff !important;
}

/* GLOBAL OVERRIDE: Force ALL blog page text to be black */
body.blog-page,
body.blog-page *:not(.fas):not(.fab):not(.far):not(.btn) {
    color: #000000 !important;
    text-shadow: none !important;
}

/* Keep icons blue */
body.blog-page .fas,
body.blog-page .fab,
body.blog-page .far {
    color: #2563eb !important;
}

/* Keep buttons with proper colours */
body.blog-page .btn-primary {
    background: #2563eb !important;
    color: white !important;
    border: 1px solid #2563eb !important;
}

/* Style the Try MyCVBoost Now button */
body.blog-page .btn-outline-primary {
    background: #2563eb !important;
    color: white !important;
    border: 2px solid #2563eb !important;
    font-weight: 600 !important;
    padding: 0.75rem 2rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

body.blog-page .btn-outline-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
}

/* Enhanced button colours for visual appeal across blog posts */

/* Purple buttons for secondary actions */
body.blog-page .btn-secondary,
body.blog-page .btn[href*="contact"],
body.blog-page .btn[href*="about"] {
    background: #7c3aed !important;
    color: white !important;
    border: 2px solid #7c3aed !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

body.blog-page .btn-secondary:hover,
body.blog-page .btn[href*="contact"]:hover,
body.blog-page .btn[href*="about"]:hover {
    background: #6d28d9 !important;
    border-color: #6d28d9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4) !important;
}

/* Orange buttons for urgent actions */
body.blog-page .btn-warning,
body.blog-page .btn[href*="free"],
body.blog-page .btn[href*="trial"],
body.blog-page .btn[href*="start"] {
    background: #ea580c !important;
    color: white !important;
    border: 2px solid #ea580c !important;
    font-weight: 700 !important;
    padding: 0.75rem 1.75rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

body.blog-page .btn-warning:hover,
body.blog-page .btn[href*="free"]:hover,
body.blog-page .btn[href*="trial"]:hover,
body.blog-page .btn[href*="start"]:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.4) !important;
}

/* Success green buttons for positive actions */
body.blog-page .btn-success,
body.blog-page .btn[href*="download"],
body.blog-page .btn[href*="get"],
body.blog-page .btn[href*="claim"] {
    background: #059669 !important;
    color: white !important;
    border: 2px solid #059669 !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

body.blog-page .btn-success:hover,
body.blog-page .btn[href*="download"]:hover,
body.blog-page .btn[href*="get"]:hover,
body.blog-page .btn[href*="claim"]:hover {
    background: #047857 !important;
    border-color: #047857 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4) !important;
}

/* Call-to-action buttons with gradient effects */
body.blog-page .btn[href*="mycvboost"],
body.blog-page .btn[href*="optimisation"],
body.blog-page .cta-button {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    color: white !important;
    border: 2px solid transparent !important;
    font-weight: 700 !important;
    padding: 1rem 2.5rem !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body.blog-page .btn[href*="mycvboost"]:hover,
body.blog-page .btn[href*="optimisation"]:hover,
body.blog-page .cta-button:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5) !important;
}

/* Horizontal layout for process steps to reduce scrolling */
body.blog-page .process-steps,
body.blog-page .steps-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 2rem !important;
    flex-wrap: wrap !important;
    margin: 2rem 0 !important;
}

@media (min-width: 768px) {
    body.blog-page .process-steps .step,
    body.blog-page .steps-container .step,
    body.blog-page .process-step {
        flex: 1 !important;
        min-width: 200px !important;
        max-width: 250px !important;
        text-align: center !important;
        padding: 1.5rem 1rem !important;
        background: #f8f9fa !important;
        border-radius: 12px !important;
        border: 2px solid #e9ecef !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        transition: transform 0.3s ease !important;
    }
    
    body.blog-page .process-steps .step:hover,
    body.blog-page .steps-container .step:hover,
    body.blog-page .process-step:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }
}

/* Step numbers styling */
body.blog-page .step-number {
    display: inline-block !important;
    width: 40px !important;
    height: 40px !important;
    background: #2563eb !important;
    color: white !important;
    border-radius: 50% !important;
    line-height: 40px !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
}

/* Step titles and content */
body.blog-page .step h4,
body.blog-page .step h3,
body.blog-page .process-step h4,
body.blog-page .process-step h3 {
    color: #1f2937 !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

body.blog-page .step p,
body.blog-page .process-step p {
    color: #6b7280 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* Side-by-side layout for comparison sections */
body.blog-page .comparison-container,
body.blog-page .features-container,
body.blog-page .benefits-container {
    display: flex !important;
    gap: 2.5rem !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin: 2rem 0 !important;
    flex-wrap: wrap !important;
}

@media (min-width: 768px) {
    body.blog-page .comparison-item,
    body.blog-page .feature-item,
    body.blog-page .benefit-item {
        flex: 1 !important;
        min-width: 300px !important;
        max-width: 45% !important;
        padding: 2rem 1.5rem !important;
        background: #f8f9fa !important;
        border-radius: 12px !important;
        border-left: 4px solid #2563eb !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    body.blog-page .comparison-item:hover,
    body.blog-page .feature-item:hover,
    body.blog-page .benefit-item:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
        border-left-color: #7c3aed !important;
    }
    
    body.blog-page .comparison-item:nth-child(2),
    body.blog-page .feature-item:nth-child(2),
    body.blog-page .benefit-item:nth-child(2) {
        border-left-color: #059669 !important;
    }
    
    body.blog-page .comparison-item:nth-child(2):hover,
    body.blog-page .feature-item:nth-child(2):hover,
    body.blog-page .benefit-item:nth-child(2):hover {
        border-left-color: #ea580c !important;
    }
}

/* Section headers with icons */
body.blog-page .comparison-item h4,
body.blog-page .feature-item h4,
body.blog-page .benefit-item h4 {
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

body.blog-page .comparison-item .fas,
body.blog-page .feature-item .fas,
body.blog-page .benefit-item .fas {
    color: #2563eb !important;
    font-size: 1.5rem !important;
}

/* Check mark lists */
body.blog-page .comparison-item ul,
body.blog-page .feature-item ul,
body.blog-page .benefit-item ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.blog-page .comparison-item li,
body.blog-page .feature-item li,
body.blog-page .benefit-item li {
    position: relative !important;
    padding-left: 2rem !important;
    margin-bottom: 1rem !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
}

body.blog-page .comparison-item li:before,
body.blog-page .feature-item li:before,
body.blog-page .benefit-item li:before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #059669 !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
}

/* High contrast text for feature badges on purple backgrounds */
body.blog-page .feature-badge,
body.blog-page .highlight-text,
body.blog-page .feature-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important;
    letter-spacing: 2px !important;
}

/* Target specific feature text on purple backgrounds */
body.blog-page [style*="background"]:contains("AI"),
body.blog-page [style*="background"]:contains("ATS"),
body.blog-page [style*="background"]:contains("UK"),
body.blog-page [style*="background"]:contains("Pro") {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Force white text on any purple/blue gradient backgrounds */
body.blog-page .card[style*="purple"],
body.blog-page .card[style*="blue"],
body.blog-page div[style*="purple"],
body.blog-page div[style*="blue"],
body.blog-page .bg-gradient,
body.blog-page .feature-card {
    color: #ffffff !important;
}

body.blog-page .card[style*="purple"] *,
body.blog-page .card[style*="blue"] *,
body.blog-page div[style*="purple"] *,
body.blog-page div[style*="blue"] *,
body.blog-page .bg-gradient *,
body.blog-page .feature-card * {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* Strong emphasis for key feature words */
body.blog-page .feature-highlight {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-size: 1.8rem !important;
    display: inline-block !important;
    margin: 0.5rem !important;
}

/* Ensure Bootstrap grid system works properly */
body.blog-page .container,
body.blog-page .row,
body.blog-page [class*="col-"] {
    box-sizing: border-box !important;
}

/* Force horizontal layout for category section */
body.blog-page .row.mb-5:has(.col-md-4) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
}

/* FORCE ALL BLOG PAGE TEXT TO BE BLACK WITH HIGH CONTRAST */
body.blog-page h1,
body.blog-page h2,
body.blog-page h3,
body.blog-page h4,
body.blog-page h5,
body.blog-page h6,
.blog-page h1,
.blog-page h2,
.blog-page h3,
.blog-page h4,
.blog-page h5,
.blog-page h6 {
    color: #000000 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

body.blog-page p,
body.blog-page .lead,
body.blog-page .text-muted,
body.blog-page .card-text,
body.blog-page .text-dark,
.blog-page p,
.blog-page .lead,
.blog-page .text-muted,
.blog-page .card-text,
.blog-page .text-dark,
.blog-page span,
.blog-page div:not(.btn):not(.badge) {
    color: #333333 !important;
    text-shadow: none !important;
}

/* Ensure blog page cards have dark text */
body.blog-page .card-title,
body.blog-page .card-body h5,
body.blog-page .card-body p,
body.blog-page .text-dark,
body.blog-page .card-body a:not(.btn),
body.blog-page .container[style*="background: white"] * {
    color: #1f2937 !important;
}

body.blog-page .text-secondary,
body.blog-page .text-muted {
    color: #6b7280 !important;
}

/* Blog hero sections can have blue gradient */
body.blog-page .hero-section {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
}

body.blog-page .hero-section h1,
body.blog-page .hero-section h2,
body.blog-page .hero-section h3,
body.blog-page .hero-section .display-4 {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.blog-page .hero-section p,
body.blog-page .hero-section .lead {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========== APPLICATION PAGES: Blue gradient background ========== */
body:not(.blog-page) {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    min-height: 100vh;
}

/* DEFAULT: All text WHITE on blue gradient background */
body:not(.blog-page) h1,
body:not(.blog-page) h2,
body:not(.blog-page) h3,
body:not(.blog-page) h4,
body:not(.blog-page) h5,
body:not(.blog-page) h6 {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 700 !important;
}

body:not(.blog-page) p,
body:not(.blog-page) .lead {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========== WHITE SECTIONS: Dark text on white backgrounds ========== */
body:not(.blog-page) .bg-light,
body:not(.blog-page) section.bg-light {
    background-color: #f8fafc !important;
}

body:not(.blog-page) .bg-light h1,
body:not(.blog-page) .bg-light h2,
body:not(.blog-page) .bg-light h3,
body:not(.blog-page) .bg-light h4,
body:not(.blog-page) .bg-light h5,
body:not(.blog-page) .bg-light h6 {
    color: var(--primary-blue) !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

body:not(.blog-page) .bg-light p,
body:not(.blog-page) .bg-light .lead {
    color: var(--neutral-dark) !important;
    text-shadow: none !important;
}

/* ========== WHITE CARDS: Dark text on white backgrounds ========== */
body:not(.blog-page) .card,
body:not(.blog-page) .card-body,
body:not(.blog-page) .bg-white {
    background-color: var(--white) !important;
}

body:not(.blog-page) .card h1,
body:not(.blog-page) .card h2,
body:not(.blog-page) .card h3,
body:not(.blog-page) .card h4,
body:not(.blog-page) .card h5,
body:not(.blog-page) .card h6,
body:not(.blog-page) .bg-white h1,
body:not(.blog-page) .bg-white h2,
body:not(.blog-page) .bg-white h3,
body:not(.blog-page) .bg-white h4,
body:not(.blog-page) .bg-white h5,
body:not(.blog-page) .bg-white h6 {
    color: var(--primary-blue) !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

body:not(.blog-page) .card p,
body:not(.blog-page) .card .lead,
body:not(.blog-page) .card label,
body:not(.blog-page) .bg-white p,
body:not(.blog-page) .bg-white .lead,
body:not(.blog-page) .bg-white label {
    color: var(--neutral-dark) !important;
    text-shadow: none !important;
}

/* ========== FEATURE CARDS: White text on gradient backgrounds ========== */
body:not(.blog-page) .feature-card {
    color: white !important;
}

body:not(.blog-page) .feature-card h1,
body:not(.blog-page) .feature-card h2,
body:not(.blog-page) .feature-card h3,
body:not(.blog-page) .feature-card h4,
body:not(.blog-page) .feature-card h5,
body:not(.blog-page) .feature-card h6 {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body:not(.blog-page) .feature-card p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========== BUTTONS: Vibrant colours from palette ========== */
.btn-primary {
    background-color: var(--primary-blue) !important;
    color: white !important;
    border-color: var(--primary-blue) !important;
    font-weight: 600 !important;
}

.btn-primary:hover {
    background-color: #1d4ed8 !important;
    color: white !important;
    border-color: #1d4ed8 !important;
}

.btn-outline-primary {
    background-color: var(--primary-blue) !important;
    color: white !important;
    border-color: var(--primary-blue) !important;
    font-weight: 600 !important;
}

.btn-outline-success {
    background-color: var(--success-green) !important;
    color: white !important;
    border-color: var(--success-green) !important;
    font-weight: 600 !important;
}

/* ========== ICONS: Specific colours from palette ========== */
body:not(.blog-page) .fas.fa-target {
    color: #ef4444 !important; /* Red for targeting */
}

body:not(.blog-page) .fas.fa-brain {
    color: var(--primary-blue) !important;
}

body:not(.blog-page) .fas.fa-award,
body:not(.blog-page) .fas.fa-medal {
    color: #f59e0b !important; /* Gold for awards */
}

body:not(.blog-page) .fas.fa-check-circle {
    color: var(--success-green) !important;
}

/* Feature card icons should be white (except decorative corner icons) */
body:not(.blog-page) .feature-card .fas:not(.fa-clock):not(.fa-bullseye):not(.fa-sparkles) {
    color: white !important;
}

/* Corner decorative icons in feature cards - EXEMPT FROM GOVERNING RULES */
body:not(.blog-page) .feature-card .position-absolute.top-0.end-0 .fas.fa-clock,
body:not(.blog-page) .feature-card .position-absolute.top-0.end-0 .fas.fa-bullseye,
body:not(.blog-page) .feature-card .position-absolute.top-0.end-0 .fas.fa-sparkles {
    font-size: 2rem !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}

/* DECORATIVE ICONS: High contrast colours that override governing rules */
body:not(.blog-page) .feature-card .position-absolute.top-0.end-0 .fas.fa-clock,
.fas.fa-clock.fs-2.decorative-icon,
body:not(.blog-page) .fas.fa-clock.decorative-icon {
    color: #10b981 !important; /* Bright green */
    opacity: 1 !important;
    filter: none !important;
}

body:not(.blog-page) .feature-card .position-absolute.top-0.end-0 .fas.fa-bullseye,
.fas.fa-bullseye.fs-2.decorative-icon,
body:not(.blog-page) .fas.fa-bullseye.decorative-icon {
    color: #dc2626 !important; /* Bold red */
    font-weight: 900 !important;
    opacity: 1 !important;
    filter: none !important;
}

body:not(.blog-page) .feature-card .position-absolute.top-0.end-0 .fas.fa-sparkles,
.fas.fa-sparkles.fs-2.decorative-icon,
body:not(.blog-page) .fas.fa-sparkles.decorative-icon {
    color: var(--gold) !important; /* Gold */
    opacity: 1 !important;
    filter: none !important;
}

/* ========== TESTIMONIAL CARDS: Proper visibility on white cards ========== */
body:not(.blog-page) .card .text-warning,
body:not(.blog-page) .text-warning {
    color: #f59e0b !important; /* Gold/orange for stars */
}

body:not(.blog-page) .card .text-dark {
    color: var(--neutral-dark) !important;
}

body:not(.blog-page) .card .text-muted {
    color: #6b7280 !important; /* Grey for job titles */
}

/* User icons in testimonial cards */
body:not(.blog-page) .card .bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

body:not(.blog-page) .card .bg-gradient-accent {
    background: linear-gradient(135deg, var(--vibrant-purple), var(--success-green)) !important;
}

body:not(.blog-page) .card .bg-gradient-secondary {
    background: var(--gradient-secondary) !important;
}

body:not(.blog-page) .card .bg-secondary {
    background: var(--neutral-dark) !important;
}

/* Fix for any missing gradient backgrounds */
body:not(.blog-page) .card .rounded-circle.p-3:not([class*="bg-gradient"]):not([class*="bg-"]) {
    background: var(--gradient-primary) !important;
}

body:not(.blog-page) .card .fas.fa-user {
    color: white !important;
}

/* Ensure all card text is properly visible */
body:not(.blog-page) .card h5.mb-0.fw-bold {
    color: var(--primary-blue) !important;
}

body:not(.blog-page) .card small {
    color: #6b7280 !important;
}

/* Star ratings specifically */
body:not(.blog-page) .d-flex.text-warning .fas.fa-star {
    color: #f59e0b !important;
}