/* ============================================================
   CLS FIX CSS — sleekbill.in/contact/
   
   Add to <head> BEFORE any other CSS files:
   <link rel="stylesheet" href="/css/contact-cls-fixes.css">
   ============================================================ */

/* ----------------------------------------------------------
   1. GLOBAL IMAGE STABILITY
   ---------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}


/* ----------------------------------------------------------
   3. LOGO — Fixed dimensions (appears twice: mobile + desktop)
   ---------------------------------------------------------- */
img[src*="logo-sleekbill"] {
  width: 180px;
  height: 40px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 180 / 40;
}


/* ----------------------------------------------------------
   2. NAVBAR — Reserve exact height
   Two navbars (mobile + desktop) swap via JS = shift.
   ---------------------------------------------------------- */
/* cls-fixes.css */

/* Prevent Header Jump */
header, .main-nav { 
    min-height: 84px; 
    contain: layout; 
}


.faq-question {
    min-height: 130px !important; /* Matches your existing CSS but forces it early */
    contain: layout;
}
.white .row, .grey .row {
    display: flex !important;
    flex-wrap: wrap !important;
}


/* 4. Mobile Responsiveness */
/* Ensures the 'Flex' layout doesn't break the mobile stack */
@media screen and (max-width: 991px) {
    .white .row, .grey .row { 
        display: block !important; 
    }
    .white .col-md-8, .white .col-md-4, .col-md-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        min-height: auto !important;
    }
    .mobile-logo {
        min-height: 60px !important;
    }
}


/* Fix the Office/Contact Section Layout Shift */
.custom-contact {
    min-height: 600px; 
    display: block;
    contain: layout;
}

/* Reserve space for Bootstrap columns before they float */
.custom-contact .col-md-6 {
    min-height: 250px;
}

/* Mobile Adjustments */
@media screen and (max-width: 640px) {
    .mobile-logo { min-height: 60px; }
    .custom-contact { min-height: 900px; } /* Columns stack vertically on mobile */
}


/* ----------------------------------------------------------
   6. BADGE IMAGES — expert_choice & exceptional_customer
   These appear twice (blue in body, white in footer).
   Without dimensions they cause shift when loading.
   ---------------------------------------------------------- */
img[src*="expert_choice_blue"],
img[src*="expert_choice_white"],
img[src*="expostional_customer_blue"],
img[src*="expostional_customer_white"]
{
  width: 100px;
  height: 100px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Hide on tablet and mobile */
@media (max-width: 1024px) {
  img[src*="expert_choice_blue"],
  img[src*="expert_choice_white"],
  img[src*="expostional_customer_blue"],
  img[src*="expostional_customer_white"] {
    display: none !important;
  }
}

/* Badge container — reserve space */
.badges-section,
.awards-row,
div:has(img[src*="expert_choice"]),
div:has(img[src*="expostional_customer"]) {
  min-height: 160px;
  contain: layout;
}

/* ----------------------------------------------------------
   7. FAQ-STYLE Q&A SECTION
   
   The 4 questions ("Why do I need...", "How do I buy...",
   "Does it have GST...", "Is it safe...") may use
   accordion/expand behavior that causes CLS.
   ---------------------------------------------------------- */

/* Individual Q&A items */

.faq-title, .faq-answer {
    font-display: swap; /* Keeps text visible while font loads */
}


body, p, h1, h2, h3, a {
    font-display: swap !important;
}
/* Expanded answers — use max-height not height */


/* ----------------------------------------------------------
  10. CTA SECTION ("Enjoy your life and grow your business")
   ---------------------------------------------------------- */
.cta-section,
.bottom-cta,
div[class*="cta"],
section:has(a[href*="signup"]) {
  min-height: 200px;
  contain: layout;
}

/* ----------------------------------------------------------
  11. FOOTER IMAGES — Fixed dimensions
   ---------------------------------------------------------- */
img[src*="comodo-badge"] {
  width: 120px;
  height: 50px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 120 / 50;
  object-fit: contain;
}


/* ----------------------------------------------------------
  16. SCROLLBAR STABILITY
   Prevent horizontal scrollbar flash on page load
   ---------------------------------------------------------- */
html {
  overflow-x: hidden;
  scrollbar-gutter: stable;
}