/* Your custom CSS here */

/* =============================================================================
   FONT DISPLAY OPTIMIZATION - Reduce FOIT and CLS from web fonts
   ============================================================================= */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-display: swap;
    size-adjust: 100%;
}
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-display: swap;
    size-adjust: 100%;
}
@font-face {
    font-family: 'Font Awesome 6 Solid';
    font-display: swap;
    size-adjust: 100%;
}
@font-face {
    font-family: 'Font Awesome 6 Regular';
    font-display: swap;
    size-adjust: 100%;
}
@font-face {
    font-family: 'bootstrap-icons';
    font-display: swap;
    size-adjust: 100%;
}

/* Reserve space for icon fonts to prevent layout shifts */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class^="bi-"], [class*=" bi-"] {
    display: inline-block;
    min-width: 1em;
    text-align: center;
}

/* =============================================================================
   IMAGE CLS PREVENTION - Aspect ratio and sizing
   ============================================================================= */

/* Large images (816x460) - Post detail slider */
.carousel-item img[width="816"],
.swiper-slide img[width="816"],
.bx-item img[width="816"],
.main-gallery img {
    aspect-ratio: 816 / 460;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Medium images (320x240) - Carousel thumbnails */
.item-carousel-thumb img[width="320"],
.featured-list-slider img {
    aspect-ratio: 320 / 240;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Small images (120x90) - Thumbnail gallery */
.thumbs-gallery img[width="120"],
.bx-thumb-item img[width="120"] {
    aspect-ratio: 120 / 90;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* User avatar images - Square aspect ratio */
.img-fluid[width="800"][height="800"],
img[alt*="avatar"],
.user-avatar {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* User avatar container - Reserve space */
.col-md-4 > img.img-fluid.rounded[width="800"] {
    width: 100%;
    max-width: 100px;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Logo images - Fixed height, auto width to preserve aspect ratio */
.main-logo {
    height: 40px;
    width: auto;
    max-width: 485px;
}

/* =============================================================================
   LCP OPTIMIZATION
   ============================================================================= */

/* Reduce render blocking of tips alert */
.alert-warning.alert-dismissible {
    content-visibility: auto;
    contain-intrinsic-size: auto 60px;
}

/* Accessibility: Improve link contrast ratios */
.alert-warning .link-primary {
    color: #0d5aa7 !important; /* Darker blue for better contrast on yellow background */
}
.alert-warning .link-primary:hover {
    color: #094177 !important;
}

/* Accessibility: Improve text contrast in item containers */
.item-list .list-inline-item,
.item-list .text-nowrap {
    color: #495057 !important; /* Darker gray for better contrast */
}

/* Cookie consent button contrast */
.cookie-consent-btn {
    color: #212529 !important;
    background-color: #ffc107 !important;
    border: 1px solid #ffc107 !important;
}
.cookie-consent__disagree {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}