/* =========================================================
   ToolZen Hub
   Home Page
   Responsive Layout
   Does NOT interfere with Header / Footer
========================================================= */


/* =========================================================
   BOX SIZING
========================================================= */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


/* =========================================================
   BODY
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
}


/* =========================================================
   MAIN APP
========================================================= */

#app {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
}


/* =========================================================
   HOME SECTIONS
========================================================= */

#hero,
#categories,
#popular-calculators,
#latest-articles {
    width: 100%;
    max-width: 100%;

    margin: 0;

    box-sizing: border-box;
}


/* =========================================================
   IMPORTANT
   DO NOT REMOVE CONTAINER PADDING

   The shared .container controls the correct
   left/right alignment for desktop and mobile.
========================================================= */

#app .container {
    width: 100%;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   GRID SAFETY
========================================================= */

#categories .category-grid,
#popular-calculators .calculator-grid {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   GRID CHILD SAFETY
========================================================= */

#categories .category-card,
#popular-calculators .calculator-card {
    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    #app {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    #hero,
    #categories,
    #popular-calculators,
    #latest-articles {
        width: 100%;
        max-width: 100%;

        margin-left: 0;
        margin-right: 0;

        transform: none;
    }


    /*
     * Keep the shared container's horizontal
     * spacing instead of forcing it to zero.
     */

    #app .container {
        width: 100%;
        max-width: 1200px;

        margin-left: auto;
        margin-right: auto;

        box-sizing: border-box;
    }


    #categories .category-grid,
    #popular-calculators .calculator-grid {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    #app {
        width: 100%;
        max-width: 100%;
    }


    #hero,
    #categories,
    #popular-calculators,
    #latest-articles {
        width: 100%;
        max-width: 100%;
    }


    /*
     * DO NOT use 100vw here.
     *
     * 100vw can create horizontal overflow because
     * mobile browsers may include scrollbar space.
     */

    #app .container {
        width: 100%;
        max-width: 1200px;

        margin-left: auto;
        margin-right: auto;
    }


    #categories .category-grid,
    #popular-calculators .calculator-grid {
        width: 100%;
        max-width: 100%;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    #app,
    #hero,
    #categories,
    #popular-calculators,
    #latest-articles {
        width: 100%;
        max-width: 100%;
    }


    #app .container {
        width: 100%;
        max-width: 1200px;
    }

}