/* CRITICAL: Prevent horizontal scroll on ALL screen sizes - uses overflow:clip so position:sticky on #frontNav keeps working */
html, body {
    overflow-x: hidden !important; /* fallback for very old browsers */
    overflow-x: clip !important;   /* modern browsers: prevents horizontal overflow without creating a scroll container */
}
.continuous-gradient {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* ALL screen sizes: premium sections use width:100% + horizontal padding, so they
   must be border-box or they grow wider than the viewport and clip their content
   (previously this rule only existed inside the max-width:768px media query,
   which is why 13-14 inch laptops showed cut-off sections). */
.howItWorksPremiumSection,
.trustPremiumSection,
.certPremiumSection,
.faqPremiumSection,
.studyAnywhereSection,
.teamsTrainingSection,
.whyChoosePremiumSection,
.reviewsPremiumSection,
.certStepsSection,
.mhDefSection,
#statsCounter,
#counterWrap {
        box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Narrow screens: floating badges use nowrap text anchored to image frames,
   so long labels get cut at the viewport edge. Let them wrap gracefully. */
@media (max-width: 480px) {
    /* Stacked mobile layout: keep the image columns full width so they do not
       collapse onto the image itself and drag the floating badges with them. */
    .certImageWrapper,
    .certImageFrame,
    .trustImageWrapper,
    .trustImageFrame,
    .studyImageWrapper,
    .studyImageFrame,
    .teamsImageFrame {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .howItWorksFloatingBadge,
    .certFloatingBadge,
    .teamsFloatingBadge {
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        text-align: center;
        line-height: 1.35;
    }
}

/* Mobile specific */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    .continuous-gradient,
    .continuous-gradient > * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    /* Ensure all sections respect container width */
    section, .section,
    [class*="Section"],
    [class*="Wrapper"],
    [class*="Container"],
    [class*="Inner"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Fix potential overflow from images - exclude footer logos and banner */
    img:not(.card-logo):not(.footerStripe):not(.irelandFlag):not(.warehouse) {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Banner background image - fill container */
    #mainBanner {
        position: relative !important;
        overflow: hidden !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
    .warehouse {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    /* Fix tables and pre elements */
    table, pre {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    /* Premium sections overflow fix */
    .howItWorksInner,
    .certStepsInner,
    .trustPremiumInner,
    .certPremiumInner,
    .studyAnywhereInner,
    .teamsTrainingInner,
    .faqPremiumContent,
    .whyChooseAccordionContainer,
    .reviewsContentWrapper {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Image wrappers */
    .howItWorksImageWrapper,
    .trustImageWrapper,
    .studyImageWrapper,
    .teamsImageWrapper {
        max-width: 100% !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Certificate wrapper - needs higher z-index for badges */
    .certImageWrapper {
        max-width: 100% !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 100 !important;
    }
    
    /* Certificate floating badges - always on top */
    .certFloatingBadge {
        z-index: 99999 !important;
        position: absolute !important;
    }
    /* Image frames */
    .howItWorksImageFrame,
    .trustImageFrame,
    .certImageFrame,
    .studyImageFrame,
    .teamsImageFrame {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .howItWorksImageFrame img,
    .trustImageFrame img,
    .certImageFrame img,
    .studyImageFrame img,
    .teamsImageFrame img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* Footer logos - preserve their specific sizes */
    .footer-wrapper .card-logo,
    .footer-wrapper .footerStripe,
    .footer-wrapper .irelandFlag {
        max-width: none !important;
        width: auto !important;
    }
    .footer-wrapper .card-logo.visa { height: 22px !important; }
    .footer-wrapper .card-logo.mastercard { height: 24px !important; }
    .footer-wrapper .card-logo.applepay { height: 25px !important; }
    .footer-wrapper .card-logo.googlepay { height: 25px !important; }
    .footer-wrapper .footerStripe { width: 170px !important; height: auto !important; }
    .footer-wrapper .cards-logos {
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }
}

/* Extra small screens - tighter control */
@media (max-width: 480px) {
    .howItWorksPremiumSection,
    .trustPremiumSection,
    .certPremiumSection,
    .studyAnywhereSection,
    .teamsTrainingSection,
    .faqPremiumSection,
    .whyChoosePremiumSection,
    .reviewsPremiumSection {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}