/* Portfolio and Careers Page Gutenberg Block Styles */

/* Custom Background Colors for Gutenberg Blocks */
:root {
    --light-gray: #f8f9fa;
    --light-blue: #e0f2fe;
    --light-green: #d1fae5;
    --light-purple: #f3e8ff;
    --light-yellow: #fef3c7;
    --light-red: #fee2e2;
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    
    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
}

/* Background Color Classes */
.has-light-gray-background-color { background-color: var(--light-gray) !important; }
.has-light-blue-background-color { background-color: var(--light-blue) !important; }
.has-light-green-background-color { background-color: var(--light-green) !important; }
.has-light-purple-background-color { background-color: var(--light-purple) !important; }
.has-light-yellow-background-color { background-color: var(--light-yellow) !important; }
.has-light-red-background-color { background-color: var(--light-red) !important; }

/* =========================
   PORTFOLIO TAB ANIMATIONS
   ========================= */

/* Tab Navigation Container */
.case-study-tabs {
    position: relative;
    margin: 3rem 0 4rem;
    padding: 0 1rem;
}

.tab-navigation {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tab-btn {
    background: none;
    border: none;
    padding: 1rem 2rem;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    font-size: 1rem;
    color: white !important; /* Force proper color */
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    min-width: 180px;
    justify-content: center;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--primary-gradient);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.tab-btn:hover::before,
.tab-btn.active::before {
    left: 0;
}

.tab-btn:hover,
.tab-btn.active {
    color: white !important; /* Force white text on active/hover */
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(102, 126, 234, 0.3);
}

.tab-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.tab-btn:hover .tab-icon,
.tab-btn.active .tab-icon {
    transform: scale(1.1) rotate(5deg);
}

.tab-title {
    font-weight: 600;
    letter-spacing: 0.025em;
    color: white;
}

/* Tab Content Animation */
.case-study-content {
    position: relative;
    min-height: 800px;
    overflow: hidden;
    color: var(--text-primary);
}

.tab-content {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    color: var(--text-secondary);
}

.tab-content.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
    pointer-events: auto;
}

.tab-content h1, .tab-content h2, .tab-content h3, 
.tab-content h4, .tab-content h5, .tab-content h6 {
    color: var(--text-primary) !important;
}

/* =========================
   ANIMATED CASE STUDY CARDS
   ========================= */

.case-study-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(20px);
    opacity: 0;
    animation: slideInUp 0.8s ease-out forwards;
    position: relative;
    overflow: hidden;
}

.case-study-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.8s ease;
    z-index: 1;
    pointer-events: none;
}

.case-study-card:hover::before {
    left: 100%;
}

.case-study-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.case-study-card h3 {
    color: var(--text-primary) !important;
}

.case-study-card p {
    color: var(--text-secondary) !important;
}

.case-study-card ul li {
    color: var(--text-secondary) !important;
}

.case-study-card p:contains("Challenge:") {
    color: #dc2626 !important;
    font-weight: 600;
}

.case-study-card p:contains("Solution:") {
    color: #10b981 !important;
    font-weight: 600;
}

.results-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(20px);
    opacity: 0;
    animation: slideInUp 0.8s ease-out 0.2s forwards;
}

.results-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.results-card h4 {
    color: var(--text-primary) !important;
}

.results-card p {
    color: var(--text-secondary) !important;
}

.results-card ul li {
    color: var(--text-secondary) !important;
}

.results-card p:contains("Results:") {
    color: #8b5cf6 !important;
    font-weight: 600;
}

/* =========================
   COUNTER ANIMATIONS
   ========================= */

.metric-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.metric-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.metric-card:hover::after {
    opacity: 1;
}

.metric-card:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.counter-number {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

.metric-card:hover .counter-number {
    transform: scale(1.1);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Counter Animation Keyframes */
@keyframes countUp {
    from { 
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.counter-number.animate {
    animation: countUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================
   LIST ANIMATIONS
   ========================= */

.animated-list li {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInLeft 0.6s ease-out forwards;
}

.animated-list li:nth-child(1) { animation-delay: 0.1s; }
.animated-list li:nth-child(2) { animation-delay: 0.2s; }
.animated-list li:nth-child(3) { animation-delay: 0.3s; }
.animated-list li:nth-child(4) { animation-delay: 0.4s; }

/* =========================
   KEYFRAME ANIMATIONS
   ========================= */

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* =========================
   INTERSECTION OBSERVER ANIMATIONS
   ========================= */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation Delays */
.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }

/* =========================
   RESPONSIVE DESIGN
   ========================= */

@media (max-width: 768px) {
    .tab-navigation {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem 0.5rem;
    }
    
    .tab-btn {
        min-width: auto;
        width: 100%;
        padding: 1rem 1.5rem;
        justify-content: flex-start;
    }
    
    .case-study-content {
        min-height: auto;
    }
    
    .wp-block-columns {
        flex-direction: column !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: 2rem;
    }
    
    .case-study-card,
    .results-card {
        margin-bottom: 2rem;
    }
    
    .metric-card:hover {
        transform: scale(1.02) translateY(-2px);
    }
    
    .metric-card {
        transition: all 0.2s ease;
    }
    
    .metric-card:active {
        transform: scale(0.95);
    }
    
    .tab-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    .tab-btn:active {
        transform: scale(0.95);
    }
}

@media (max-width: 480px) {
    .tab-btn {
        font-size: 0.9rem;
        padding: 0.875rem 1rem;
    }
    
    .tab-icon {
        font-size: 1rem;
    }
    
    .case-study-tabs {
        margin: 2rem 0 3rem;
        padding: 0 0.5rem;
    }
}

/* =========================
   EXISTING STYLES (ENHANCED)
   ========================= */

/* Card Hover Effects */
.benefit-card,
.position-card {
    transition: all 0.3s ease;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.benefit-card::before,
.position-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.benefit-card:hover::before,
.position-card:hover::before {
    left: 100%;
}

.benefit-card:hover,
.position-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Enhanced Button Animations */
.wp-block-button__link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.wp-block-button__link:hover::before {
    left: 100%;
}

.wp-block-button__link:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Enhanced Metric Cards */
.wp-block-group.has-light-blue-background-color,
.wp-block-group.has-light-green-background-color,
.wp-block-group.has-light-purple-background-color,
.wp-block-group.has-light-yellow-background-color,
.wp-block-group.has-light-red-background-color {
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.wp-block-group.has-light-blue-background-color:hover,
.wp-block-group.has-light-green-background-color:hover,
.wp-block-group.has-light-purple-background-color:hover,
.wp-block-group.has-light-yellow-background-color:hover,
.wp-block-group.has-light-red-background-color:hover {
    transform: scale(1.08) translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* =========================
   ACCESSIBILITY ENHANCEMENTS
   ========================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus States for Accessibility */
.tab-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 15px;
}

.metric-card:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 4px;
}

/* Print Styles */
@media print {
    .case-study-tabs,
    .tab-navigation {
        display: none;
    }
    
    .tab-content {
        opacity: 1 !important;
        transform: none !important;
        position: static !important;
        pointer-events: auto !important;
    }
    
    .case-study-card,
    .results-card {
        break-inside: avoid;
        box-shadow: none !important;
        transform: none !important;
    }
}

/* =========================
   TOUCH INTERACTIONS & MOBILE
   ========================= */

.touch-active {
    transform: scale(0.98) !important;
    opacity: 0.9 !important;
}

/* =========================
   LOADING ANIMATIONS
   ========================= */

@keyframes skeleton {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
    background-size: 300px;
    animation: skeleton 2s infinite linear;
}

/* =========================
   HIGH CONTRAST MODE SUPPORT
   ========================= */

@media (prefers-contrast: high) {
    .tab-btn {
        border: 2px solid currentColor;
    }
    
    .metric-card {
        border: 1px solid currentColor;
    }
    
    .case-study-card,
    .results-card {
        border: 1px solid #ccc;
    }
}


/* =========================
   SKELETON LOADER ANIMATIONS
   ========================= */

.skeleton-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.skeleton-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.skeleton-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
}

.skeleton-text {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 2s infinite linear;
    border-radius: 8px;
    height: 1rem;
    margin-bottom: 1rem;
}

.skeleton-title {
    height: 1.5rem;
    width: 80%;
    margin-bottom: 1.5rem;
}

.skeleton-subtitle {
    height: 1rem;
    width: 60%;
    margin-bottom: 1rem;
}

.skeleton-paragraph {
    height: 0.875rem;
    width: 90%;
    margin-bottom: 0.75rem;
}

.skeleton-paragraph:last-of-type {
    width: 70%;
}

.skeleton-metrics {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.skeleton-metric {
    flex: 1;
    height: 4rem;
    background: linear-gradient(90deg, #e3f2fd 25%, #bbdefb 50%, #e3f2fd 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 2s infinite linear;
    border-radius: 12px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* =========================
   PERFORMANCE MODE OPTIMIZATIONS
   ========================= */

.performance-mode {
    --animation-duration-fast: 0.1s;
    --animation-duration-normal: 0.15s;
    --animation-duration-slow: 0.2s;
}

.performance-mode .case-study-card,
.performance-mode .results-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.performance-mode .metric-card {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.performance-mode .tab-btn {
    transition: all 0.15s ease;
}

.performance-mode .tab-content {
    transition: all 0.2s ease;
}

/* Disable complex animations on low-end devices */
.performance-mode .case-study-card::before,
.performance-mode .results-card::before,
.performance-mode .benefit-card::before,
.performance-mode .position-card::before {
    display: none;
}

.performance-mode .wp-block-button__link::before {
    display: none;
}

/* Simplified hover effects for performance mode */
.performance-mode .case-study-card:hover,
.performance-mode .results-card:hover {
    transform: translateY(-3px);
}

.performance-mode .metric-card:hover {
    transform: scale(1.02);
}

/* =========================
   HIGH REFRESH RATE OPTIMIZATIONS
   ========================= */

.high-refresh {
    --animation-duration-fast: 0.08s;
    --animation-duration-normal: 0.12s;
    --animation-duration-slow: 0.25s;
}

.high-refresh .tab-btn {
    transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

.high-refresh .case-study-card,
.high-refresh .results-card {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================
   ANIMATION READY STATES
   ========================= */

.ready-for-animation {
    animation: subtle-entrance 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes subtle-entrance {
    from {
        opacity: 0.7;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   ENHANCED FOCUS INDICATORS
   ========================= */

.tab-btn:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 3px;
    border-radius: 15px;
    transition: outline 0.2s ease;
}

.metric-card:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 4px;
    transition: outline 0.2s ease;
}

/* =========================
   LOADING STATES
   ========================= */

.tab-content.loading {
    opacity: 0.7;
    pointer-events: none;
}

.tab-content.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: loading-spinner 1s linear infinite;
}

@keyframes loading-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================
   COUNTER ANIMATION ENHANCEMENTS
   ========================= */

.counter-number.counting {
    position: relative;
}

.counter-number.counting::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    animation: counting-indicator 2s ease-in-out;
}

@keyframes counting-indicator {
    0%, 100% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(1);
    }
}

/* =========================
   MICRO-INTERACTIONS
   ========================= */

.metric-card:hover .counter-number {
    animation: number-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes number-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.tab-btn.active .tab-icon {
    animation: icon-celebrate 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes icon-celebrate {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.2) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

/* =========================
   ACCESSIBILITY IMPROVEMENTS
   ========================= */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tab-btn {
        border: 2px solid currentColor;
        background: white;
    }
    
    .tab-btn.active {
        background: black;
        color: white;
    }
    
    .metric-card,
    .case-study-card,
    .results-card {
        border: 2px solid #333;
    }
    
    .skeleton-text,
    .skeleton-metric {
        background: #ccc;
        animation: none;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .skeleton-text,
    .skeleton-metric {
        animation: none;
        background: #f0f0f0;
    }
    
    .ready-for-animation {
        animation: none;
    }
    
    .counter-number.counting::after {
        animation: none;
        display: none;
    }
    
    .metric-card:hover .counter-number {
        animation: none;
    }
    
    .tab-btn.active .tab-icon {
        animation: none;
    }
}

/* =========================
   PRINT OPTIMIZATIONS
   ========================= */

@media print {
    .skeleton-loader {
        display: none;
    }
    
    .tab-navigation {
        display: none;
    }
    
    .tab-content {
        opacity: 1 !important;
        transform: none !important;
        position: static !important;
        pointer-events: auto !important;
        page-break-inside: avoid;
    }
    
    .case-study-card,
    .results-card {
        break-inside: avoid;
        box-shadow: none !important;
        transform: none !important;
        border: 1px solid #ddd;
    }
    
    .metric-card {
        border: 1px solid #ccc;
        box-shadow: none !important;
    }
}

/* =========================
   COLOR CONSISTENCY FIXES
   ========================= */

/* Ensure all portfolio text has proper colors */
.case-study-content {
    color: var(--text-primary);
}

.case-study-content h1,
.case-study-content h2,
.case-study-content h3,
.case-study-content h4,
.case-study-content h5,
.case-study-content h6 {
    color: var(--text-primary) !important;
}

.case-study-content p {
    color: var(--text-secondary) !important;
}

.case-study-content ul li,
.case-study-content ol li {
    color: var(--text-secondary) !important;
}

/* Override WordPress default black text */
.wp-block-heading {
    color: var(--text-primary) !important;
}

.wp-block-paragraph {
    color: var(--text-secondary) !important;
}

.wp-block-list li {
    color: var(--text-secondary) !important;
}

/* Case study specific color overrides */
.case-study-card h3 {
    color: var(--text-primary) !important;
}

.case-study-card p {
    color: var(--text-secondary) !important;
}

.case-study-card ul li {
    color: var(--text-secondary) !important;
}

.results-card h4 {
    color: var(--text-primary) !important;
}

.results-card p {
    color: var(--text-secondary) !important;
}

.results-card ul li {
    color: var(--text-secondary) !important;
}

/* Tab content general text color */
.tab-content {
    color: var(--text-secondary);
}

.tab-content h1, .tab-content h2, .tab-content h3, 
.tab-content h4, .tab-content h5, .tab-content h6 {
    color: var(--text-primary) !important;
}

/* Ensure proper text color inheritance */
.wp-block-group {
    color: inherit;
}

.wp-block-columns {
    color: inherit;
}

.wp-block-column {
    color: inherit;
}

/* Force override any theme defaults that might be black */
.case-study-tabs *:not(.counter-number):not(.tab-btn) {
    color: var(--text-secondary);
}

.case-study-tabs h1, .case-study-tabs h2, .case-study-tabs h3,
.case-study-tabs h4, .case-study-tabs h5, .case-study-tabs h6 {
    color: var(--text-primary) !important;
}

/* =========================
   COMPREHENSIVE COLOR OVERRIDES
   ========================= */

/* Global text color fixes for portfolio page */
.page-template-portfolio *,
#portfolio-page *,
.portfolio-content *,
[data-page="portfolio"] * {
    color: var(--text-secondary);
}

.page-template-portfolio h1,
.page-template-portfolio h2,
.page-template-portfolio h3,
.page-template-portfolio h4,
.page-template-portfolio h5,
.page-template-portfolio h6,
#portfolio-page h1,
#portfolio-page h2,
#portfolio-page h3,
#portfolio-page h4,
#portfolio-page h5,
#portfolio-page h6 {
    color: var(--text-primary) !important;
}

/* Blocksy theme override - prevent black text */
.entry-content p {
    color: var(--text-secondary) !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--text-primary) !important;
}

.entry-content ul li,
.entry-content ol li {
    color: var(--text-secondary) !important;
}

/* Tab content specific overrides */
.case-study-tabs .wp-block-heading {
    color: var(--text-primary) !important;
}

.case-study-tabs .wp-block-paragraph {
    color: var(--text-secondary) !important;
}

.case-study-tabs .wp-block-list li {
    color: var(--text-secondary) !important;
}

/* Gutenberg block overrides */
.wp-block-group .wp-block-heading {
    color: var(--text-primary) !important;
}

.wp-block-group .wp-block-paragraph {
    color: var(--text-secondary) !important;
}

/* Card content overrides */
.case-study-card * {
    color: var(--text-secondary) !important;
}

.case-study-card h1,
.case-study-card h2,
.case-study-card h3,
.case-study-card h4,
.case-study-card h5,
.case-study-card h6 {
    color: var(--text-primary) !important;
}

.results-card * {
    color: var(--text-secondary) !important;
}

.results-card h1,
.results-card h2,
.results-card h3,
.results-card h4,
.results-card h5,
.results-card h6 {
    color: var(--text-primary) !important;
}

/* Fix any remaining black text */
.case-study-content [style*="color:#000000"],
.case-study-content [style*="color:#000"],
.case-study-content [style*="color:black"] {
    color: var(--text-secondary) !important;
}

/* Force all headings to use primary text color */
.case-study-content [style*="color:#000000"] h1,
.case-study-content [style*="color:#000000"] h2,
.case-study-content [style*="color:#000000"] h3,
.case-study-content [style*="color:#000000"] h4,
.case-study-content [style*="color:#000000"] h5,
.case-study-content [style*="color:#000000"] h6 {
    color: var(--text-primary) !important;
}

/* Additional WordPress theme overrides */
.wp-block-columns .wp-block-column * {
    color: inherit;
}

/* Ensure text in white backgrounds is visible */
.has-white-background-color * {
    color: var(--text-secondary);
}

.has-white-background-color h1,
.has-white-background-color h2,
.has-white-background-color h3,
.has-white-background-color h4,
.has-white-background-color h5,
.has-white-background-color h6 {
    color: var(--text-primary) !important;
}

/* Challenge/Solution/Results labels - preserve their colors */
.case-study-card p[style*="dc2626"] {
    color: #dc2626 !important; /* Challenge - Red */
}

.case-study-card p[style*="10b981"] {
    color: #10b981 !important; /* Solution - Green */
}

.results-card p[style*="8b5cf6"] {
    color: #8b5cf6 !important; /* Results - Purple */
}