/**
 * PageSpeed Performance CSS Fixes
 */

/* 1. Fix Cumulative Layout Shift */
.rh-container {
    min-height: 600px;
    contain: layout;
}

/* 2. Ensure images maintain aspect ratio */
img {
    height: auto;
    max-width: 100%;
}

img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

/* 3. Fix featured image */
.wp-post-image {
    width: 100%;
    height: auto;
    display: block;
}

/* 4. Fix author avatar */
.photo[alt*="Gabriel"] {
    width: 80px !important;
    height: 74px !important;
    object-fit: cover;
}

/* 5. Fix logo */
img[alt="Drones Fuel"] {
    width: 189px;
    height: auto;
    aspect-ratio: 200/62;
}

/* 6. Accessibility: Touch targets */
.hotcountbtn {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
}

.admin_meta a.admin {
    padding: 8px 12px;
    display: inline-block;
    min-height: 44px;
}

.abh_tabs li a {
    padding: 12px 16px;
    display: inline-block;
}

/* 7. Accessibility: Color contrast */
.breadcrumb a,
.category a,
.rh-post-wrapper a {
    color: #005a9c;
}

.current {
    color: #333333;
    font-weight: 500;
}

.description a,
.abh_text a {
    color: #0056b3;
    font-weight: 500;
}

/* 8. Touch target spacing */
.abh_tabs li {
    margin: 0 8px;
}

/* 9. Lazy load transitions */
.lazyload,
.lazyloading {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazyloaded {
    opacity: 1;
}