/* ==========================================================================
   RESPONSIVE TYPOGRAPHY & LAYOUT SYSTEM
   Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE RESET (Mobile First Defaults - < 640px)
   Overriding rigid desktop styles from style.css for small screens
   -------------------------------------------------------------------------- */

/* Standardize Typography for Mobile */
html {
    font-size: 14px;
    /* Base scale */
}

/* Headers */
.text-content h2,
section header h1,
.section3 h1,
.section6 h1,
.section7 h1,
.section8 h1,
.section4 h1,
#Factories h2 {
    font-size: 6.5rem !important;
    /* ~35px */
    line-height: .8 !important;
    word-wrap: break-word;
}

.text-content h3,
.section4 h2 {
    font-size: 1.5rem !important;
    /* ~21px */
    line-height: 1.2 !important;
}

.text-content p {
    font-size: 1rem !important;
    /* 14px */
    line-height: 1.5 !important;
}

/* Specific Section overrides */
h1.lets_talk {
    font-size: 4rem !important;
    /* ~56px */
    height: auto !important;
    line-height: 1 !important;
}

.title {
    font-size: 3rem !important;
    /* Client Success Title */
}

h1.text {
    font-size: 2.5rem !important;
    height: auto !important;
}

/* Stats Section */
.num-huge {
    font-size: 4rem !important;
}

.num-small {
    font-size: 2rem !important;
}

/* Safety Section */
.slide-header {
    font-size: 2rem !important;
}

.dynamic-content .number-display {
    font-size: 3rem !important;
}

.dynamic-content .title-display {
    font-size: 1.5rem !important;
}

ul.custom-list li {
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
}

/* Ensure padding allows bullets */
.safety-module .p-8 {
    padding: 1.5rem !important;
}


/* --------------------------------------------------------------------------
   2. SMALL DEVICES (sm: 640px +)
   Tablets (Portrait) & Large Phones
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    html {
        font-size: 15px;
    }

    .text-content h2,
    section header h1,
    .section3 h1 {
        font-size: 3rem !important;
        /* ~45px */
    }

    h1.lets_talk {
        font-size: 6rem !important;
    }

    .num-huge {
        font-size: 5rem !important;
    }
}


/* --------------------------------------------------------------------------
   3. MEDIUM DEVICES (md: 768px +)
   Tablets (Landscape) & Small Laptops
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    /* Restoration of Layout Spacing */
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Typography bump */
    .text-content h2,
    section header h1,
    .section3 h1 {
        font-size: 4rem !important;
        /* ~64px */
    }

    .text-content h3 {
        font-size: 2rem !important;
    }

    h1.lets_talk {
        font-size: 8rem !important;
    }

    /* Timeline Section */
    .num-huge {
        font-size: 7rem !important;
    }

    .num-small {
        font-size: 3rem !important;
    }

    /* Safety Section Layout Restore */
    .safety-module .md\:p-16 {
        padding: 4rem !important;
    }

    .safety-module .md\:p-20 {
        padding: 4rem 4rem 4rem 6rem !important;
    }

    .slide-header {
        font-size: 3rem !important;
    }

    /* Re-align bullets for the MD spacing */
    ul.custom-list li::before {
        left: -6rem !important;
        /* Match md:p-20 (6rem effectively) */
        font-size: 1.5rem !important;
    }
}


/* --------------------------------------------------------------------------
   4. LARGE DEVICES (lg: 1024px +)
   Standard Laptops
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    /* Headers start getting big */
    .text-content h2,
    section header h1,
    .section3 h1 {
        font-size: 5rem !important;
        /* ~80px */
    }

    /* Footer Text */
    h1.lets_talk {
        font-size: 11rem !important;
    }

    /* Stats */
    .num-huge {
        font-size: 9rem !important;
    }

    /* Client Success Circle Title */
    .title {
        font-size: 7rem !important;
    }

    /* Safety Section */
    .safety-module .md\:p-20 {
        padding: 5rem 5rem 5rem 8rem !important;
    }

    ul.custom-list li::before {
        left: -8.4rem !important;
        z-index: 20;
        font-size: 1.75rem !important;
    }
}


/* --------------------------------------------------------------------------
   5. EXTRA LARGE DEVICES (xl: 1280px +)
   Desktops & Large Laptops
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {

    .text-content h2,
    section header h1,
    .section3 h1 {
        font-size: 6rem !important;
        /* ~96px */
    }

    h1.lets_talk {
        font-size: 14rem !important;
    }

    /* Restore closer to original huge sizes */
    .num-huge {
        font-size: 11rem !important;
    }

    .title {
        font-size: 9rem !important;
    }

    /* Circle Text */
}


/* --------------------------------------------------------------------------
   6. 2X EXTRA LARGE (2xl: 1536px +)
   Large Monitors (Restoring the "Agency" feel)
   -------------------------------------------------------------------------- */
@media (min-width: 1536px) {

    /* Full Design Vision Restored */
    .text-content h2,
    section header h1,
    .section3 h1 {
        font-size: 100px !important;
    }

    .text-content h3 {
        font-size: 42px !important;
    }

    .text-content p {
        font-size: 24px !important;
    }

    h1.lets_talk {
        font-size: 350px !important;
        height: 260px !important;
    }

    /* Stats */
    .num-huge {
        font-size: 10rem !important;
    }

    .num-small {
        font-size: 3.5rem !important;
    }

    /* Circle Title */
    .title {
        font-size: 10rem !important;
    }
}

/* --------------------------------------------------------------------------
   7. CIRCLE ANIMATION SECTIONS (EHS, Height Work, Hot Work)
   Responsive fixes for HD Laptop (1366x768) and Tablets
   -------------------------------------------------------------------------- */

/* HD Laptops - 1366x768 resolution */
@media (min-width: 1024px) and (max-width: 1440px) and (max-height: 900px) {

    /* Ensure center titles are readable */
    #ehs-container h2,
    #height-container h2,
    #hotwork-container h2 {
        font-size: 3rem !important;
        line-height: 1.2 !important;
    }

    /* Subtitle text */
    #ehs-container span,
    #height-container span,
    #hotwork-container span {
        font-size: 0.875rem !important;
    }

    /* SVG circle stroke adjustments for better visibility */
    .diagram-container circle {
        stroke-width: 2 !important;
    }

    /* Ensure procedure dots are visible and properly sized */
    .procedure-dot {
        width: 12px !important;
        height: 12px !important;
        /* Force GPU acceleration for smooth rendering */
        transform: translate(-50%, -50%) scale(0) !important;
        transform-style: preserve-3d;
    }

    .procedure-dot:not(.opacity-0) {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    /* Text labels - ensure they're readable */
    .procedure-text {
        font-size: 16px !important;
        font-weight: 500 !important;
        /* Improve text rendering at scaled sizes */
        text-rendering: geometricPrecision;
    }

    /* Prevent text overflow */
    .sticky-layer {
        overflow: visible !important;
    }

    /* Ensure items container scales properly with diagram */
    #ehs-items-base,
    #ehs-items-reveal,
    #height-items,
    #hotwork-items {
        transform-origin: center center;
    }
}

/* Tablets - Landscape orientation */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    #ehs-container h2,
    #height-container h2,
    #hotwork-container h2 {
        font-size: 2.5rem !important;
    }

    #ehs-container span,
    #height-container span,
    #hotwork-container span {
        font-size: 0.75rem !important;
    }

    .procedure-text {
        font-size: 14px !important;
    }

    .procedure-dot {
        width: 10px !important;
        height: 10px !important;
    }
}

/* Tablets - Portrait orientation */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    #ehs-container h2,
    #height-container h2,
    #hotwork-container h2 {
        font-size: 2rem !important;
    }

    #ehs-container span,
    #height-container span,
    #hotwork-container span {
        font-size: 0.7rem !important;
    }

    .procedure-text {
        font-size: 12px !important;
    }

    .procedure-dot {
        width: 8px !important;
        height: 8px !important;
    }
}

/* Mobile devices */
@media (max-width: 767px) {

    #ehs-container h2,
    #height-container h2,
    #hotwork-container h2 {
        font-size: 1.5rem !important;
    }

    #ehs-container span,
    #height-container span,
    #hotwork-container span {
        font-size: 0.65rem !important;
    }

    .procedure-text {
        font-size: 10px !important;
    }

    .procedure-dot {
        width: 6px !important;
        height: 6px !important;
    }

    /* Extra padding on mobile to prevent edge clipping */
    .sticky-layer {
        padding: 1rem !important;
    }
}