/**
 * Visual Enhancements for GlobalPLM.com
 * Matches SmartMag theme colors and style
 * Theme Main Color: #2ab391 (Teal Green)
 */

/* ========================================
   POST CARDS: Subtle Enhancement
   ======================================== */

/* Subtle hover lift effect */
body.home article.post,
body.home .block-wrap article {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.home article.post:hover,
body.home .block-wrap article:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(42, 179, 145, 0.12);
}

/* Image subtle zoom */
body.home .post-thumbnail img {
    transition: transform 0.5s ease;
}

body.home .post-thumbnail:hover img {
    transform: scale(1.03);
}

/* ========================================
   TYPOGRAPHY: Theme Colors
   ======================================== */

/* Title hover - theme color */
body.home .post-title a:hover,
body.home h2.post-title a:hover {
    color: #2ab391 !important;
    transition: color 0.3s ease;
}

/* ========================================
   CATEGORY LABELS: Theme Accent
   ======================================== */

/* Use theme's teal color for categories */
body.home .cat-label,
body.home .category-label,
body.home .post-category a {
    background: #2ab391;
    transition: background 0.3s ease, transform 0.3s ease;
}

body.home .cat-label:hover,
body.home .category-label:hover {
    background: #229977;
    transform: translateY(-2px);
}

/* ========================================
   LINKS: Theme Color Enhancement
   ======================================== */

body.home a:hover {
    color: #2ab391 !important;
}

body.home .post-meta a:hover {
    color: #2ab391;
}

/* ========================================
   BUTTONS: Theme Styled
   ======================================== */

/* Read more/Continue reading buttons */
body.home .read-more,
body.home .more-link,
body.home .button {
    background: #2ab391;
    color: white !important;
    padding: 10px 24px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

body.home .read-more:hover,
body.home .more-link:hover,
body.home .button:hover {
    background: #229977;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 179, 145, 0.3);
}

/* ========================================
   FEATURED SECTIONS: Accent
   ======================================== */

/* Featured post accent */
body.home .featured-post::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #2ab391;
}

/* ========================================
   SPACING: Better Breathing Room
   ======================================== */

body.home .posts article,
body.home .block-inner article {
    margin-bottom: 30px;
}

/* ========================================
   SHADOWS: Soft & Professional
   ======================================== */

body.home article.post {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ========================================
   BORDERS: Theme Accent Color
   ======================================== */

body.home .post-border,
body.home .block-head {
    border-color: #2ab391;
}

/* Accent border for focused elements */
body.home .widget:focus-within,
body.home .post:focus-within {
    border-left: 3px solid #2ab391;
    padding-left: 12px;
    transition: all 0.3s ease;
}

/* ========================================
   LOADING/ANIMATIONS: Smooth
   ======================================== */

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

body.home article.post {
    animation: slideIn 0.5s ease-out;
}

/* ========================================
   META INFORMATION: Better Contrast
   ======================================== */

body.home .post-meta,
body.home .meta-item {
    color: #757575;
}

body.home .post-meta i,
body.home .meta-item i {
    color: #2ab391;
}

/* ========================================
   RESPONSIVE: Mobile Optimized
   ======================================== */

@media (max-width: 768px) {
    body.home article.post:hover {
        transform: translateY(-2px);
    }
    
    body.home .post-thumbnail:hover img {
        transform: scale(1.02);
    }
}