/**
 * Interactive Academic CV Guide - Styles
 * Code Author: MLScientist.com
 * Copyright (c) 2025 MLScientist.com
 * Website: https://mlscientist.com
 * Products: https://mlscientist.gumroad.com
 * Contact: support@mlscientist.com
 */

body {
    font-family: 'Inter', sans-serif;
    background-color: #FDFBF8;
    color: #333D4B;
}
.nav-link {
    transition: color 0.3s ease;
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background-color: #2F6C6D;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}
.accent-bg { background-color: #2F6C6D; }
.accent-text { color: #2F6C6D; }
.accent-border { border-color: #2F6C6D; }
.secondary-bg { background-color: #EAE8E3; }
.secondary-text { color: #576371; }
.card {
    background-color: #FFFFFF;
    border: 1px solid #EAE8E3;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.interactive-toggle-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
}
.interactive-toggle-content.open {
    max-height: 500px;
    opacity: 1;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}
.accordion-content.open {
    max-height: 1000px;
}
/* Dynamic CV Styling for Audit Check */
.cv-section {
    border: 1px solid transparent; /* default transparent border */
    transition: all 0.4s ease-in-out;
}
.cv-verified {
    border: 2px solid #10B981 !important; /* Tailwind green-500 */
    background-color: #F0FAF5; /* Light green background */
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
    transform: scale(1.01); 
}

/* Enhanced Interactive CV Styles */
.interactive-cv-section {
    transition: all 0.3s ease;
}

.interactive-cv-section .section-header:hover {
    background-color: #f9fafb;
}

.interactive-cv-section .expand-icon {
    transition: transform 0.3s ease;
}

.impact-text {
    transition: all 0.3s ease;
}

.cv-example-toggle {
    transition: all 0.2s ease;
}

.cv-example-toggle:hover {
    transform: translateX(3px);
}

.cv-alternative {
    animation: slideDown 0.3s ease-out;
}

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

/* Hover effects for skill tags */
.interactive-cv-section .bg-gray-200:hover,
.interactive-cv-section .bg-blue-100:hover,
.interactive-cv-section .bg-green-100:hover,
.interactive-cv-section .bg-purple-100:hover,
.interactive-cv-section .bg-amber-100:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Quick Actions button hover effects */
#toggle-cv-tips:hover,
#highlight-impact:hover,
#show-weak-points:hover,
#reset-cv-view:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Enhanced Strategy Section Styles */
.strategy-step {
    transition: all 0.3s ease;
}

.strategy-step:hover {
    transform: translateY(-3px);
}

.hover-tip {
    transition: opacity 0.3s ease;
}

.hover-tip-trigger:hover .hover-tip {
    display: block !important;
}

#strategy-details-panel {
    animation: slideDown 0.4s ease-out;
}

.strategy-metric {
    transition: all 0.3s ease;
}

.strategy-metric:hover {
    transform: translateY(-3px);
}

.metric-detail {
    animation: expandDown 0.3s ease-out;
}

@keyframes expandDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 300px;
    }
}

/* Enhanced Impact Formula Styles */
.formula-component {
    transition: all 0.3s ease;
}

.formula-component:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(47, 108, 109, 0.2);
}

.impact-example-card {
    transition: all 0.3s ease;
}

.impact-example-card:hover {
    transform: translateY(-3px);
}

.weak-bullet-option {
    transition: all 0.3s ease;
}

.weak-bullet-option:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.weak-bullet-option.selected {
    border-color: #10B981 !important;
    background-color: #F0FDF4;
}

#improvement-suggestion {
    animation: slideDown 0.4s ease-out;
}

/* Toggle button active state */
.toggle-metric-btn.active::after {
    content: ' ▲';
}

.toggle-metric-btn:not(.active)::after {
    content: ' ▼';
}

/* Bottom Action Bar Enhanced Styles */
.bg-gradient-to-br {
    background: linear-gradient(to bottom right, #ffffff, #f9fafb);
}

.bg-gradient-to-r {
    background: linear-gradient(to right, #9333ea, #4f46e5);
}

/* Action bar feature cards hover effects */
.grid > div:hover {
    transform: translateY(-5px);
}

/* Action bar buttons enhanced hover effects */
a[href="#impact"]:hover,
a[href="#audit"]:hover,
a[href*="gumroad"]:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}