/* =========================================================
   T-Dev Responsive Styles
========================================================= */


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

@media (max-width: 768px) {

    /* -----------------------------------------------------
       Header
    ----------------------------------------------------- */

    .header-inner {

        min-height: 68px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        position: relative;
    }


    /* Logo */

    .site-logo img {

        width: 170px;

        height: auto;
    }


    /* Hide desktop navigation */

    .main-navigation {

        display: none;
    }


    /* Hide desktop actions */

    .header-actions {

        display: none;
    }


    /* Show mobile menu button */

    .mobile-menu-toggle {

        display: flex;
    }


    /* -----------------------------------------------------
       Mobile Navigation
    ----------------------------------------------------- */

    .mobile-navigation {

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        display: none;

        background: var(--surface);

        border-top: 1px solid var(--border);

        border-bottom: 1px solid var(--border);

        padding: 10px 24px;

        z-index: 1000;
    }


    /* Open mobile navigation */

    .mobile-navigation.is-open {

        display: block;
    }


    /* -----------------------------------------------------
       Global Container
    ----------------------------------------------------- */

    .container {

        padding-left: 20px;

        padding-right: 20px;
    }


    /* -----------------------------------------------------
       Homepage
    ----------------------------------------------------- */

    .hero {

        padding-left: 20px;

        padding-right: 20px;
    }


    /* -----------------------------------------------------
       Global Grids
    ----------------------------------------------------- */

    .categories-grid,
    .tools-grid {

        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       General Page
    ----------------------------------------------------- */

    .page-container {

        width: 100%;
    }

}


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

@media (max-width: 480px) {

    /* Container */

    .container {

        padding-left: 16px;

        padding-right: 16px;
    }


    /* Logo */

    .site-logo img {

        width: 150px;
    }


    /* Mobile navigation */

    .mobile-navigation {

        padding-left: 16px;

        padding-right: 16px;
    }


    /* Page */

    .site-page {

        padding-left: 12px;

        padding-right: 12px;
    }


    .page-content {

        padding-left: 20px;

        padding-right: 20px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 769px) {

    /* Hide mobile menu */

    .mobile-menu-toggle {

        display: none !important;
    }


    /* Hide mobile navigation */

    .mobile-navigation {

        display: none !important;
    }

}


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

@media (max-width: 768px) {

    .header-search-panel {

        padding: 16px 20px;
    }

    .header-search-form {

        max-width: none;
    }

}


@media (max-width: 480px) {

    .header-search-panel {

        padding: 14px 16px;
    }

    .header-search-form {

        gap: 8px;
    }

    .header-search-submit {

        padding: 0 16px;
    }

}