/* ===== SKILLS VISIBILITY FIX ===== */
/* This file ensures skills are visible in preview and downloads */

/* Force skills section to be visible in preview */
.preview .skills-section,
.section.skills-section,
#previewSkillsSection {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Only hide when explicitly marked as hidden */
.preview .skills-section.hidden,
#previewSkillsSection.hidden {
    display: none !important;
}

/* Skills grid layout */
.preview .skills-grid,
.skills-grid,
#previewSkills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
}

/* Individual skill items in preview */
.preview .skill-item,
.skills-grid .skill-item,
#previewSkills .skill-item {
    display: inline-block !important;
    background: #FFB199 !important;
    color: white !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 4px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    visibility: visible !important;
}

/* Skill placeholder styling */
.skill-placeholder {
    color: #9E9E9E !important;
    font-style: italic !important;
}

/* Ensure visibility across all templates */
.preview.peach-modern .skills-section,
.preview.peach-minimal .skills-section,
.preview.peach-creative .skills-section,
.preview.peach-professional .skills-section,
.preview.peach-tech .skills-section,
.preview.peach-academic .skills-section,
.preview[class*="peach-"] .skills-section {
    display: block !important;
    visibility: visible !important;
}

/* Skills header styling */
.skills-section h2 {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
}

/* Print media styles */
@media print {
    .skills-section,
    #previewSkillsSection,
    .section.skills-section {
        display: block !important;
        visibility: visible !important;
        page-break-inside: avoid !important;
        opacity: 1 !important;
    }
    
    .skills-grid,
    #previewSkills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }
    
    .skill-item {
        display: inline-block !important;
        visibility: visible !important;
        background: #FFB199 !important;
        color: white !important;
        padding: 0.4rem 0.8rem !important;
        border-radius: 4px !important;
    }
}

/* Mobile responsive - tablets and below */
@media (max-width: 768px) {
    .preview .skills-section,
    #previewSkillsSection {
        display: block !important;
        visibility: visible !important;
    }
    
    .preview .skills-grid,
    #previewSkills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }
    
    .preview .skill-item,
    #previewSkills .skill-item {
        font-size: 0.85rem !important;
        padding: 0.3rem 0.6rem !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .preview .skill-item,
    #previewSkills .skill-item {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .skills-section h2 {
        font-size: 1.2rem !important;
    }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    .preview .skills-section,
    #previewSkillsSection {
        display: block !important;
        visibility: visible !important;
    }
    
    .preview .skills-grid,
    #previewSkills {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}

/* Large screens */
@media (min-width: 1025px) {
    .preview .skills-section,
    #previewSkillsSection {
        display: block !important;
        visibility: visible !important;
    }
}

/* PDF/Document export specific styles */
body.exporting .skills-section,
body.downloading .skills-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure skills are visible when printing from browser */
@page {
    .skills-section {
        display: block !important;
    }
}