/**
 * Enhanced Performance CSS - CRITICAL CLS FIXES
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* CRITICAL: FORCE featured image container stability */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.top_featured_image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

/* Ensure the image fills without shifting */
.top_featured_image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Additional aspect ratio fixes */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wp-post-image {
    aspect-ratio: 16 / 9;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Fix avatar CLS */
.photo,
.avatar {
    width: 250px !important;
    height: 250px !important;
    object-fit: cover;
}

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

.admin_meta a.admin {
    padding: 10px 14px !important;
    min-height: 48px;
}

.abh_tabs li a {
    padding: 12px 16px;
    min-height: 48px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Accessibility - Link contrast */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rh-post-wrapper a {
    color: #0056b3;
}

.rh-post-wrapper a:hover {
    color: #003d82;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Focus indicators */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a:focus,
button:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Don't break social icons */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.social-icons img,
.socials img,
[class*="social"] img {
    width: auto !important;
    height: auto !important;
    aspect-ratio: unset !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* CSS containment */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.post-content,
.entry-content {
    contain: layout;
}