/**
 * Critical CSS for Brytesoft Theme
 * Essential styles for above-the-fold content
 */

/* Critical layout styles */
.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-main {
    flex: 1;
}

/* Critical header styles */
.page-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
}

/* Critical hero banner styles */
.homepage-banner {
    margin-bottom: 1.25rem;
}

.homepage-banner a {
    display: block;
}

.homepage-banner img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Critical responsive styles */
@media (min-width: 768px) {
    .homepage-banner {
        margin-bottom: 2.5rem;
    }
}

/* Critical loading states */
.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy.loaded {
    opacity: 1;
}

.homepage-banner {
    position: relative;
    width: 100%;
    /* Reserve space based on your banner dimensions */
    aspect-ratio: 1920/600; /* Desktop ratio */
    background-color: #f8f9fa; /* Subtle placeholder color */
    overflow: hidden;
}

/* Mobile aspect ratio */
@media (max-width: 767px) {
    .homepage-banner {
        aspect-ratio: 16/9; /* Adjust based on your mobile banner ratio */
    }
}

.homepage-banner picture,
.homepage-banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepage-banner img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.homepage-banner img.loaded {
    opacity: 1;
}

/* Clickable areas - position absolutely over the banner */
.homepage-banner a {
    position: absolute;
    z-index: 2;
    /* Define click areas based on your banner design */
}

.link-office-2024 {
    top: 20%;
    left: 10%;
    width: 25%;
    height: 60%;
}

.link-windows-11 {
    top: 20%;
    left: 37.5%;
    width: 25%;
    height: 60%;
}

.link-office-2021 {
    top: 20%;
    left: 65%;
    width: 25%;
    height: 60%;
}