/**
 * Platty Menu - Mobile Responsive Styles
 * Breakpoints: ≤ 768px and ≤ 480px
 */

/* Tablet Small - 768px */
@media (max-width: 768px) {
    .platty-menu-container {
        flex-wrap: wrap;
    }

    .platty-menu-logo {
        margin-right: 20px;
    }

    /* HIDE DESKTOP NAV ON MOBILE */
    .platty-menu-nav {
        display: none !important;
    }

    .platty-menu-item {
        font-size: 13px;
        margin-right: 15px;
    }

    .platty-menu-buttons {
        order: 2;
        margin-left: auto;
    }

    /* Mega menu adjustments */
    .platty-megamenu-dropdown {
        max-width: 100%;
        padding: 20px;
        left: -15px;
        right: -15px;
        width: calc(100vw - 30px);
    }

    .platty-megamenu-content {
        flex-direction: column;
        gap: 20px;
    }

    .platty-megamenu-left {
        grid-template-columns: 1fr;
        gap: 10px;
    }

}

/* Mobile - 480px */
@media (max-width: 480px) {
    .platty-menu-logo {
        margin-right: 10px;
    }

    .platty-menu-item {
        font-size: 12px;
        margin-right: 10px;
        padding: 8px 0;
    }

    .platty-menu-item::after {
        bottom: -10px;
        height: 2px;
    }

    .platty-menu-buttons {
        gap: 6px;
    }

    .platty-menu-button {
        padding: 8px 16px;
        font-size: 13px;
    }

    .platty-megamenu-dropdown {
        padding: 15px;
        left: -10px;
        right: -10px;
        width: calc(100vw - 20px);
    }

    .platty-megamenu-category {
        font-size: 11px;
        margin-bottom: 15px;
    }

    .platty-megamenu-card {
        padding: 15px;
        gap: 12px;
    }

    .platty-megamenu-card-icon {
        width: 32px;
        height: 32px;
    }

    .platty-megamenu-card-title {
        font-size: 14px;
    }

    .platty-megamenu-card-desc {
        font-size: 12px;
    }

}