/* 
 * Font Optimization Configuration
 * Improves loading performance and font display
 */

/* Google Fonts Override - Ensure display:swap is applied */
@font-face {
    font-family: 'Roboto';
    src: url('https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2') format('woff2');
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lbBP.woff2') format('woff2');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2') format('woff2');
    font-display: swap;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fDxc4AMP6lbBP.woff2') format('woff2');
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('https://fonts.gstatic.com/s/poppins/v20/pxiGyqcIzptmUCg16IVe2HYESZ5eUg8bkQqOlaLsPL0.woff2') format('woff2');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('https://fonts.gstatic.com/s/poppins/v20/pxiGyqcIzptmUCg16IVe2HYESZVeUg8bkQqOlaLsPL0.woff2') format('woff2');
    font-display: swap;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('https://fonts.gstatic.com/s/poppins/v20/pxiGyqcIzptmUCg16IVe2HYESc9eUg8bkQqOlaLsPL0.woff2') format('woff2');
    font-display: swap;
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('https://fonts.gstatic.com/s/poppins/v20/pxiGyqcIzptmUCg16IVe2HYESddeUg8bkQqOlaLsPL0.woff2') format('woff2');
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/_Wk-_K7eFhxqwwEZFzrEeVMX8VdG27V4XsPMlJPeYdakGfxH96l-uq8OlJP.woff2') format('woff2');
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/_Wk-_K7eFhxqwwEZFzrEeVMX8VdG27V4XsPMlJPeYdakGfxH96l-uq8OlJP.woff2') format('woff2');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/_Wk-_K7eFhxqwwEZFzrEeVMX8VdG27V4XsPMlJPeYdakGfxH96l-uq8OlJP.woff2') format('woff2');
    font-display: swap;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/_Wk-_K7eFhxqwwEZFzrEeVMX8VdG27V4XsPMlJPeYdakGfxH96l-uq8OlJP.woff2') format('woff2');
    font-display: swap;
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/_Wk-_K7eFhxqwwEZFzrEeVMX8VdG27V4XsPMlJPeYdakGfxH96l-uq8OlJP.woff2') format('woff2');
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('https://fonts.gstatic.com/s/plusjakartasans/v8/_Wk-_K7eFhxqwwEZFzrEeVMX8VdG27V4XsPMlJPeYdakGfxH96l-uq8OlJP.woff2') format('woff2');
    font-display: swap;
    font-weight: 800;
    font-style: normal;
}

/* Font Smoothing for better rendering */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure text is visible during font load */
html {
    font-display: swap;
}

/* Optimize font sizes for better performance */
body {
    font-kerning: auto;
    text-rendering: optimizeLegibility;
}

/* Performance optimization for icon fonts */
.bi,
[class^="bi-"],
[class*=" bi-"] {
    font-display: swap;
}
/* 
 * CLS & LCP Optimization
 * Prevents layout shifts and optimizes critical images
 */

/* Hero Section Images */
.hero-bg {
  aspect-ratio: 1400 / 900;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hero-img img {
  aspect-ratio: 400 / 500;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Member Card Images */
.member-image-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
}

.member-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Testimonial Images */
.testimonial-img-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.testimonial-img-premium {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* FAQ Image */
.faq-img-wrapper img {
  aspect-ratio: 400 / 500;
  height: auto;
}

/* Footer Logo */
.footer-logo {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

/* Logo Images */
.logo img,
.mobile-nav-toggle img {
  display: block;
  width: auto;
  height: auto;
}

/* Grid Images */
.img-fluid {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Prevent layout shift on image load */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Image containers should have defined dimensions */
picture {
  display: block;
}

/* WebP Support for faster loading */
picture > img {
  width: 100%;
  height: auto;
}

/* LCP Element Optimization */
@media (max-width: 768px) {
  .hero-bg {
    aspect-ratio: 16 / 9;
  }
}

/* Preload LCP image */
link[rel="preload"][as="image"] {
  display: none;
}

/* Ensure buttons don't shift */
.btn-get-started,
.btn-login-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}